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图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 
用 , 未 经 授权 ， 不 得 进行 传播 。 
我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产 
权 。 

如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 


Jonathan Chaffer 

现 就 职 于 Rapid Development Group 公 
司 ( 位 于 密歇根 州 大 溪 市 ) 。 他 的 工 
作 是 审查 和 实现 各 种 技术 项 目 ， 尤 其 
是 PHP、MySQL 和 JavaScript 项 目 。 
他 还 是 jQuery 的 面授 培训 讲师 。 


在 开源 社区 中 ， 他 一 直 为 Drupal CMS 项 
目 做 贡献 ， 这 个 项 目 也 采用 了 jQuery。 
他 是 流行 的 Drupal 网 站 结构 化 内 容 管 
理 模 块 Content Construction Kit 的 开发 
者 。 他 还 负责 Drupal 菜 单 系统 及 开发 
人 员 API 的 检查 和 审改 工作 。 


Karl Swedberg 

现 就 职 于 密歇根 州 大 溪 市 的 Fusionary 
Media 人 公司， 他 的 主要 工作 是 使 用 
JavaScript 做 出 好 玩 的 东西 。 他 是 
jQuery 团队 成 员 ， 负 责 维护 jQuery API 
网 站 http://api.jquery.com。 他 还 是 
jQuery 顾问 团 成 员 ， 经 常 在 研讨 班 和 大 
会 上 演讲 。 工 作 之 余 ， 他 喜欢 与 家 人 
一 块 出 去 旅游 、 在 自己 的 工作 室 里 焙 
制 咖啡 或 者 在 附近 的 CrossFit 健 身 房 锻 
炼 身体 。 
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内 容 提要 


本 书 是 jQuery 经 典 技术 教程 的 最 新 升级 版 ， 涵 盖 jQuery 1.10.x 和 jQuery 2.0x。 本 书 前 6 章 以 通俗 易 懂 
的 方式 讲解 了 jQuery 的 核心 组 件 ， 包 括 jQuery 的 选择 符 、 事 件 、 动 画 、DOM 操作 、Ajax 支持 等 。 第 7 章 
和 第 8 章 介绍 了 jQuery UI、jQuery Mobile 及 利用 jQuery 强大 的 扩展 能 力 开发 自 定义 插件 。 随 后 的 几 章 更 
加 深入 地 探讨 了 jQuery 的 各 种 特性 及 一 些 高 级 技术 。 附 录 A 特别 讲解 了 JavaScript 中 闭 包 的 概念 ， 以 及 如 
何在 jQuery 中 有 效 地 使 用 闭 包 。 附 录 B 讲解 了 使 用 QUnit 测试 JavaScript 代码 的 必 备 知识 。 附 录 C 给 出 了 
jQuery API 的 快速 参考 。 

本 书 注重 理论 与 实践 相 结 合 ， 由 浅 入 深 、 循 序 渐进 ， 适 合 各 层次 的 前 端 Web 开发 人 员 学 习 和 参考 。 
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在 众多 JavaScript 框 架 (或 JavaScript 库 ) 中 ，jQuery 一 枝 独 秀 早已 是 不 争 的 事实 。 在 Google 
Trends ( http:/www.google.com/trends/ ) 中 搜 一 下 “jquery, prototype,dojo,yui,underscore”， 你 就 会 
看 到 什么 叫 遥 遥 领 先 。 为 什么 会 这 样 呢 ? 

jQuery 是 2006 年 1 月 14 日 诞生 的 , 它 的 “父亲 ”是 一 位 年 轻 帅 气 的 80 后 小 伙 子 , 名 叫 John Resig。 
Resig 在 刚 写 出 jQuery 的 时 候 ，Dojo 和 Prototype 等 JavaScript 库 已 经 比较 有 名 了 。 当 时 ,“Aajx” 这 
个 新 闻 儿 刚刚 发 明 不 到 1 年 , 由 Jesse James Garrett 那 篇 名 垂青 史 的 文章 (“Ajax: A New Approach to 
Web Applications”，http://t.cn/zOyTMn0 ) 引发 的 全 球 学 习 JavaScript 的 热潮 还 在 持续 升温 ,在 这 个 
背景 下 ，JavaScript 框 架 如 雨 后 春 筹 般 纷 纷 破土 而 出 。 

为 了 快速 开发 时 侣 的 Ajax 应 用 ， 不 少 前 端 开 发 人 员 在 日 常 工作 中 就 选用 Dojo 、Prototype 及 
Scriptaculous 这 样 的 JavaScript 功 能 及 效果 库 。 这 些 库 的 主要 特点 是 包装 和 扩展 JavaScript 核 心 及 
BOM 和 DOM 已 有 的 功能 ， 为 开发 人 员 提 供 大 量 便捷 的 实用 函数 。 从 根本 上 说 ， 这 些 库 大 都 以 功 
能 为 中 心 ， 而 且 处 处 迎合 传统 面向 对 象 程 序 员 的 开发 习惯 。jQuery 不 然 ， 它 借鉴 了 很 多 脚本 语言 
的 动态 特性 ， 集 多 项 创新 于 一 身 ， 开 创 了 全 新 的 编程 风格 。 

尽管 并 不 是 第 一 个 JavaScript 框 架 ， 但 jQuery 后 来 居 上 ; 刚 一 发 布 ， 就 “ 引 无 数 英 雄 竞 折 腰 ”。 
很 多 其 他 框架 的 拥 征 迅速 迷 上 了 jQuery,“ 弃 暗 投 明 ”。 用 后 来 成 为 jQuery 核心 团队 成 员 的 Yehuda 
Katz 的 话说 :“ (看 到 jQuery 的 ) 第 一 眼 我 就 喜欢 上 了 这 个 框架 。 我 想 ， 这 不 就 是 我 梦 傈 以 求 的 
编程 方式 吗 !” 

Katz 所 说 的 “ 梦 倚 以 求 的 编程 方式 ”， 指 的 就 是 “以 DOM 元 素 为 核心 ， 一 点 一 点 地 给 它们 添 
加 新 功能 ”( by centering on DOM Elements and tacking bits of functionality on top of them, jQuery 
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made JavaScript fun again ，http://visualjjquery.com/magazine/issuel.pdf )。 用 今天 jQuery 开发 人 员 的 
话说 ,jQuery 的 特色 就 是 “面向 集合 和 方法 连 级 ”。 闭 上 眼睛 想 一 想 ，jQuery 利 用 CSS 选 择 符 创建 
jQuery 对 象 , 为 这 些 对 象 提供 丰富 的 方法 , 批量 操作 其 中 的 DOM 元 素 , 而 且 让 所 有 方法 尽 可 能 
返回 这 个 对 象 以 实现 方法 连 级 调用 ， 这 些 绝妙 的 创意 组 合 在 一 起 ， 无 异 于 重新 发 明了 JavaScript 
( 就 像 CoffeeScript 和 Sass 现 在 所 做 的 一 样 )。 难 怪 Katz 说 完 刚 才 那 句 话 ， 紧 接着 又 补充 道 :“jQuery 
让 写 JavaScript 代 码 变 得 妙趣 横生 1!1” 


















































GD Yehuda Katz 也 是 Ruby on Rails 团 队 核 心 成 员 、 畅 销 书 《jQuery 实战 》 一 书 合 著 者 。( 下 文 脚 注 若 无 特别 说 明 均 为 
译 者 注 。) 
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即便 是 6 年 后 的 今天 ，jQuery 和 简洁、 灵活 的 编程 风格 所 具有 的 表达 能 力 照 样 让 人 一 见 倾心 。 
在 前 仆 后 继 、 强 手 如 林 的 JavaScript 框 架 社区 中 ,jQuery 依然 是 当之无愧 的 手 楚 。 今天 , 一 名 精通 
JavaScript 的 前 端 “ 攻 城 师 ”， 很 可 能 也 是 一 位 jQuery 高 手 ; 一 个 JavaScript 驱 动 的 富 Web 应 用 ,很 
可 能 完全 是 用 jQuery 代码 写 就 的 。 简 言 之 ， 学 JavaScript， 不 能 不 学 jQuery。 

回 到 书 的 话题 上 。 从 2007 年 开始 ， 介 绍 jQuery 的 书 渐渐 地 多 起 来 。 人 民 邮 电 出 版 社 图 灵 公 司 
独 具 慧 眼 ， 率 先 在 国内 引进 了 本 书 (Learning jQuery ) 第 1 版 ， 而 我 也 有 孝 成 为 国内 第 一 本 jQuery 
中 文 图 书 的 译 者 。 不久 后 上 市 的 《jQuery 基础 教程 (第 1 版 )》 深 受 JavaScript 及 jQuery 学 习 者 欢迎 。 
2009 年 11 月 , 与 时 俱 进 的 《jQuery 基础 教程 (第 2 版 )》 问世 ,jQuery 之 父 John Resig 专 门 为 之 作 序 。 
时 光 蔡 兽 ， 几 度 春 秋 。 如 今 ， 本 书 第 3 版 又 要 跟 读者 见面 了 。 回 想起 几 年 来 本 书 一 版 再 版 ， 长 销 
不 误 , 心中 不 禁 产生 一 种 莫名 的 自豪 感 。 根 据 已 有 的 数字 , 应 该 说 至 少 已 经 有 近 两 万 名 读者 通过 
这 本 书 迈 入 了 jQuery 开发 的 砍 堂 。( 当然 ， 这 个 数字 并 未 包含 网 络 上 广 为 流 传 的 “扫描 版 "。 对 于 
“扫描 版 "， 我 绝 不 支持 ， 只 希望 有 能 力 购买 正版 的 朋友 不 要 在 知识 面前 音 冀 。) 

jQuery 赢 在 理念 ， 本 书 同 样 不 落 俗 套 。 鉴 于 jQuery 已 经 成 为 最 流行 的 JavaScript 库 ， 开 发 者 队 
伍 日 益 庞 大 、 开 发 展 次 越 来 越 高 ,在 这 个 新 版 本 中 , 作者 重新 规划 了 全 书 内 容 。 全 书 总 体 上 分 为 
入 门 与 提高 两 个 部 分 ， 共 包含 13 章 3 个 附录 。 前 8 章 是 “从 入 门 到 精通 ”的 基础 部 分 ， 在 上 一 版 基 
础 上 做 了 很 多 增删 改 的 工作 ,涵盖 了 选择 元 泰 、 处 理事 件 、 样 式 动画 、 操 作 DOM 发送 数 据 ( Ajax )， 
以 及 使 用 和 开发 搬 件 。 第 9 章 至 第 13 章 是 高 级 部 分 ， 每 一 章 的 章 名 均 冠 以 “高 级 ”二 字 : 高 级 选 
择 符 和 遍历 、 高 级 事件 、 高 级 效果 、 高 级 DOM 操 作 和 高 级 AJAX。 不 言 而 喻 ， 这 几 章 是 前 半 部 分 
内 容 的 延伸 和 拓展 , 包括 了 各 种 高 级 应 用 和 复杂 技巧 ， 比 如 优化 遍历 性 能 、 使 用 事件 委托 、 自 定 
义 动画 效果 、 本 地 化 数据 和 HTML5 等 。 

另外 ， 需 要 癌 读 者 说 明 的 是 ， 在 翻译 本 书 这 一 版 的 过 程 中 ， jQuery 1.7 于 2011 年 11 月 3 日 发 布 
了 。 事 实 上 ， 这 个 时 间距 jQuery 1.6.4 的 发 布 还 不 到 两 个 月 。 虽然 本 书 这 一 版 的 英文 版 基于 jQuery 
1.6.x, 但 jQuery 1.7 相 对 于 1.6.x 的 变化 不 大 , 而 且 完 全 向 后 兼容 , 所 以 本 书 内 容 同 样 适合 jQuery 1.7， 
所 有 代码 示例 均 可 以 1.7 下 正常 运行 。 为 了 满足 广大 读者 对 jQuery 1.7 的 好 奇 心 ， 同 时 也 为 了 弥补 
图 书 出 版 滞后 于 库 版 本 更 新 速度 的 缺憾 , 译 者 在 征 得 英文 版 出 版 方 同意 的 情况 下 , 新 增 了 附录 D， 
简要 介绍 了 jQuery 1.7 的 主要 新 特性 和 新 API。 

最 后 ,感谢 本 书 编辑 丁 晓 罗 ， 她 认真 负责 的 工作 让 本 书 得 以 完整 无 缺 地 呈现 在 读者 面前 ( 当 
然 ， 如 果 再 有 缺失 也 全 都 是 我 一 人 的 下 漏 )， 也 多 亏 了 她 的 督促 ， 才 让 这 篇 译 者 序 得 以 写成 。 丁 
晓 易 也 是 我 即将 出 版 的 男 一 本 译 著 《深入 HTML5 应 用 开发 》 的 编辑 ， 借 此 机 会 一 并 感谢 。 

最 应 该 感谢 的 ， 还 是 我 的 妻子 宋 慧 人 敏和 儿子 李 嘉 浩 。 妻 子 为 家 庭 做 出 了 难以 想象 的 牺牲 ， 分 
担 了 大 部 分 责任 ， 如 果 没 有 她 的 宽容 和 理解 ,我 不 可 能 每 天 沉浸 在 翻译 的 世界 里 。 儿 子 则 是 我 们 
俩 最 大 的 骄 做 ， 除 了 时 不 时 带 给 我 们 意外 的 惊喜 ， 本 书 中 有 几 句 话 也 是 他 翻译 录入 的 。 
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2006 年 12 月 26 日 ， 中 国 南海 台湾 附近 发 生 7.2 级 地 震 ， 数 分 钟 后 又 发 生 了 6.7 级 地 震 。 受 强烈 
地 震 影 响 , 中 美 海 缆 等 多 条 国际 海底 通信 光缆 发 生 中 断 , 造成 附近 国家 和 地 区 的 国际 和 地 区 性 通 
信 受 到 严重 影响 。2007 年 1 月 29 日 ， 电 信和 网 通 宣布 ， 经 过 20 多 天 的 抢修 ， 受 地 震 影 响 中 断 的 国际 
通信 业务 已 全 部 恢复 。 在 此 期 间 ， 中 国 雅虎 在 邮箱 主页 顶部 ， 发 布 了 一 个 由 于 海 缆 中 断 可 能 会 造 
成 邮件 收发 有 问题 的 通告 。 当 时 ， 通告 是 在 页 面 加 载 完 成 大 约 1 秒 钟 后 ， 以 渐变 和 动画 形式 出 现 
在 页 面 顶 部 的 一 一 跟 jQuery 官 方 网 站 首页 那个 “The quick and dirty” 的 演示 效果 很 相似 。 而 且 ， 
通告 显示 了 大 约 几 秒 钟 后 又 以 动画 形式 自动 消失 , 整个 页 面 好 像 什么 都 没有 发 生 过 一 样 。 这 个 动 
画 效 果 深 深 地 吸引 了 我 。 以 前 ， 我 也 试 着 写 过 像 卓越 亚马逊 网 站 首页 “所 有 20 类 商品 ”按钮 那 种 
鼠标 悬 停 后 动画 展示 品类 列表 的 脚本 ， 但 使 用 了 几 十 行 代码 ， 如 今 这 个 更 酷 的 效果 是 怎么 实现 的 
呢 ? 于是， 我 怀 着 强烈 的 好 奇 心 开 始 查 看 它 的 源 代码 ( 这 要 感谢 JavaScript 天 生 的 开源 特性 )。 这 
一 看 不 要 紧 ， 我 售 奇 地 发 现 这 个 效果 仅 用 了 寥寥 几 行 代码 ! 惊讶 之 余 , 济 本 求 源 ， 最 后 “认识 ” 
了 精巧 而 美妙 的 jQuery， 特 别 是 它 优雅 的 方法 连 级 能 力 ， 更 令 我 如 获 至 宝 、 兴 奋 不 已 ! 后 来 我 查 
了 很 多 jQuery 的 资料 , 发 现 它 的 文档 没有 汉化 , 就 用 一 周 的 休息 时 间 翻 译 了 它 的 API( 1.1 版 ) 文档 。 
这 份 汉 化 文档 在 jQuery 中 文 资 料 荐 乏 的 时 候 为 广大 jQuery 网 友 提 供 了 一 点 帮助 ， 也 获得 了 大 家 的 认 
可 和 好 评 。 

JavaScript 库 和 框架 致力 于 解决 的 问题 ， 无 非 就 是 ( 跨 浏 览 器 的 ) DOM 操 作 、 事 件 处 理 、 
样式 更 换 和 外 部 通信 ( Ajax )。 但 jQuery 独特 的 集合 对 象 、 隐 舍 迭 代 、 方法 连 级 、 自 定义 选择 符 
和 事件 方法 ， 加 之 只 有 不 到 20 KB 的 超 轻 巧 和 执行 速度 超 快 ， 赢 得 了 众多 JavaScript 开 发 者 的 

jQuery 不 仅 支持 各 式 各 样 的 CSS 选 择 符 表达 式 ， 而 且 还 支持 XPath 和 自 定义 的 选择 符 表 达 式 ， 
这 一 点 在 JavaScript 库 和 框架 领域 中 无 出 其 右 者 ,使 开发 者 找到 要 操作 的 元 素 或 集合 简单 得 难以 置 
信 ; 它 细腻 灵巧 而 又 富有 弹性 的 事件 处 理 机 制 ,包括 事件 注册 、 触 发 和 自 定 义 , 特别 是 令 JavaScript 
的 Guru 级 人 物 都 喜 不 自 禁 的 hover () 方 法 ， 使 它 在 JavaScript 库 和 框架 之 林 中 独树一帜 、 个 性 十 
足 ; 它 在 操作 DOM 文 档 时 的 大 处 着 眼 ， 小 处 着 手 ， 提 供 的 丰富 而 实用 的 各 种 遍历 和 操作 DOM 结 
构 及 元 素 的 方法 , 令 人 耳目 一 新 ,， 简直“ 直 双 每 个 JavaScript 爱 好 者 的 心理 防线 ”， 那 种 令 人 任 然 
心动 的 感觉 , 历久 弥 新 ; 它 处 理 Ajax 请 求 和 响应 的 简洁 明快 , 它 的 简单 易 用 ， 它 超级 方便 的 扩展 
机 制 ， 它 丰富 的 插件 支持 ( Interface 等 )， 它 背后 的 强大 社区 …… 所 有 这 些 ， 引 无 数 JavaScript 高 
手 竞 折腰! 
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事实 上 ,因特网 上 的 JavaScript 库 和 框架 数 以 百 千 计 ,， 为 什么 唯 独 jQuery 对 我 们 这 些 爱好 者 有 
如 此 大 的 吸引 力 呢 ?就 是 因为 jQuery 采取 了 与 其 他 库 和 框架 皆 然 不 同 的 理念 ， 处 处 匠心 独 运 ， 别 
出 心 裁 一 一 具体 细节 ， 请 参考 本 书 第 1 章 。 

《jQuery 基础 教程 》 作 为 第 一 本 全 面 、 深 入 介绍 jQuery 库 的 图 书 ， 可 以 说 是 应 运 而 生 的 。 书 中 
包含 了 jQuery 教程 、jQuery 实 例 和 JavaScript 最 佳 实践 。jQuery 教 程 部 分 是 本 书 第 2 章 至 第 6 章 ， 分 
别 介绍 了 jQuery 中 的 选择 符 、 事 件 处 理 、DOM 操 作 、 动 画 效果 和 Ajax 方法 。 其 中 ， 第 3 章 、 第 4 
章 、 第 5 章 结 尾 , 特别 归纳 了 相应 方法 及 适用 情形 , 既 简 明 又 实用 。jQuery 实 例 部 分 是 本 书 第 7 章 、 
第 8 章 、 第 9 章 ， 分 别 围绕 Web 开 发 中 最 常见 的 表格 、 表 单 和 动画 效果 ， 详 尽 地 探讨 了 使 用 jQuery 
的 方方面面 。 这 几 章 的 实例 ， 深 入 讨论 诸多 Web 开 发 问题 ， 深 入 浅 出 、 九 九 道 来 ， 时 不 时 令 人 拍 
案 叫 绝 、 感 叹 很 多 百 思 不 得 其 解 的 问题 ， 其 实 只 有 一 层 窗户 纸 ! 第 10 章 介绍 了 jQuery 强大 的 扩展 
能 力 ， 介绍 了 扩展 jQuery 或 者 编写 自己 的 jQuery 插件 的 方法 。 这 一 章 深 入 到 jQuery 核心 ， 把 整个 
库 的 架构 全 部 展现 给 了 读者 ， 并 向 读者 揭示 出 jQuery 库 中 的 “陷阱 ”和 “关键 "， 令 人 有 种 然 开 
痕 、 懂 然 大 悟 之 感 。 

现代 JavaScript 开 发 的 一 个 基准 点 就 是 最 佳 实践 。 为 了 让 读者 不 走 弯路 、 不 浪费 宝贵 的 时 间 ， 
本 书 在 介绍 通过 jQuery 进行 JavaScript 开 发 的 过 程 中 ,实践 了 “渐进 增强 ”和 “平稳 退化 ”这 两 个 
不 唐 突 的 (unobtrusive ) JavaScript 开 发 原则 。 把 抽象 的 概念 形象 化 、 具 体 化 ,字里行间 ， 渗 透 着 
作者 对 这 些 先 进 理念 的 阐发 与 启示 。 

值得 一 提 的 是 ， 本 书 附录 C“JavaScript 闭 包 ” 是 名 副 其 实 的 “压轴 好 戏 "。 这 人 么 举重 若 轻 、 
浅显 易 懂 地 讨论 JavaScript 财 包 , 在 译 者 看 来 还 是 头 一 次 。 几 个 精心 设计 的 例子 , 读者 跟着 走 下 来 ， 
不 知 不 觉 中 就 能 领略 到 JavaScript 这 一 高 级 特性 的 精髓 所 在 ( 也 许 没 有 说 得 那么 容易 )。 

书 是 人 类 进步 的 阶梯 , 这 话 一 点 不 假 ; 但 “ 尽 信 书 不 如 无 书 ”。 要 想 学 习 jQuery 不 能 不 看 jQuery 
的 图 书 , 但 是 ， 只 看 是 不 管用 的 ， 还 要 动手 实践 一 一 打开 文本 编辑 器 和 浏览 器 ， 亲 手写 jQuery 代 
码 ! 书 中 很 多 地 方 讲 的 只 是 要 点 ， 而 动手 实践 才能 收获 书 中 没有 讲 到 的 东西 。 

最 后 , 也 是 最 重要 的 , 我 要 感谢 在 翻译 此 书 过 程 中 , 傅 志 红 老 师 给 我 提供 的 帮助 和 建议 。 感 
谢 武 卫 东 老师 、 刘 江 老 师 对 译 稿 的 指点 。 感 谢 图 灵 俱 乐 部 “明月 星光 ”网 友 的 热心 建言 。 不 过 ， 
由 于 个 人 水 平和 能 力 ， 翻译 中 的 错误 和 不 当 之 处 在 所 难免 。 如 果 读 者 发 现 了 书 中 的 问题 , 请 务必 
本 着 “治病救人 ”的 白求恩 精神 ， 在 我 的 个 人 网 站 http://www.cn-cuckoo.com 中 指出 , 或 者 将 电子 
邮件 发 送 到 lsf.email@gmail.com。 
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得 知 Karl Swedberg 和 Jonathan Chaffer 共 同 编写 这 本 jQuery 教程 ， 我 次 感 荣幸 。 作 为 第 一 本 
jQuery 图 书 ， 它 为 其 他 jQuery 一 一 实际 上 ， 也 为 其 他 JavaScript 图 书 ， 树 立 了 一 个 新 标杆 。 第 
一 版 自 面世 以 来 , 始终 高 居 最 畅销 JavaScript 图 书 榜首 , 究 其 原因 , 概 源 自 其 内 在 的 高 品质 和 对 细 
节 的 关注 。 

我 尤其 高 兴 ， 是 Karl 和 Jonathan 共 同 执笔 撰写 了 这 本 书 ， 因 为 我 对 他 们 非常 了 解 ， 知 道 他 们 
是 写 这 方面 图 书 的 最 佳人 选 。 作 为 jQuery 开发 团队 的 核心 人 员 ， 我 在 过 去 的 几 年 间 对 Karl 有 了 充 
分 的 了 解 ， 特别 是 对 他 编写 本 书 的 情况 十 分 熟悉 。 看 看 最 终 作 品 就 会 知道 ,作为 开发 人 员 和 曾经 
的 英文 教师 ， 由 他 来 完成 这 个 写 书 任务 简直 是 老 天 的 巧妙 安排 。 

我 还 曾 有 机 会 与 他 们 两 位 谋面 一 一 对 于 从 事 分 布 式 开源 项 目 工作 的 我 们 来 说 , 这 种 见面 机 会 
算是 极为 难得 的 。 当 然 ， 他 们 目前 依旧 是 jQuery 社区 的 中 坚 分 子 。 

jQuery 社区 中 有 许 许多 多 不 同 的 人 在 使 用 jQuery， 其 中 包括 设计 人 员 、 开 发 人 员 、 有 编程 经 
验 的 人 和 没有 编程 经 验 的 人 。 即 使 是 jQuery 团队 内 部 ， 也 有 很 多 不 同 背 景 的 人 为 这 个 项 目的 发 展 
提供 各 自 的 建议 。 来 自 五 湖 四 海 的 jQuery 用 户 都 有 着 同一 个 目标 ， 即 我 们 这 个 由 开发 人 员 和 设计 
人 员 组 成 的 社区 ， 其 宗旨 就 是 让 JavaScript 开 发 变 得 越 来 越 简单 。 

此 时 此 刻 ， 重 申 开 源 项 目 是 社区 导向 的 ， 或 者 说 开源 项 目的 目标 就 是 帮助 新 用 户 快速 上 手 ， 
好 像 总 有 几 分 陈 词 滥 调 的 意味 。 然 而 ， 这 个 宗旨 对 jQuery 而 言 绝 非 表面 上 做 做 姿态 ， 其 理念 恰恰 
正 是 项 目 本 身 绵绵 不 绝 的 动力 源泉 。 在 jQuery 团队 中 ， 除 了 维护 核心 代码 的 人 ， 实 际 上 还 有 更 多 
的 人 在 负责 管理 社区 、 撰 写 文 档 和 编写 插件 。 虽然 库 本 身 的 稳定 性 至 关 重要 , 但 代码 背后 的 社区 
也 绝对 不 容 忽 视 。 一 个 项 目 是 等 闲 平庸 、 举 步 维 艰 , 还 是 能 处 处 满足 甚至 超出 用 户 的 期 许 ， 可 以 
说 完全 取决 于 社区 。 

我 们 如 何 运营 项 目 ， 用 户 如 何 使 用 我 们 的 代码 ， 是 jQuery 与 大 多 数 开 源 项 目 ( 以 及 大 多 数 
JavaScript 库 ) 的 根本 差异 所 在 ,jQuery 项 目 及 其 社区 是 具有 高 度 智慧 的 ,我 们 深 知 是 什么 让 jQuery 

带 给 了 用 户 不 同 的 编程 体验 ， 并 且 也 在 竭尽 全 力 把 这 些 知识 和 智慧 传递 给 我 们 的 用 户 。 
袖手旁观 永远 不 会 理解 jQuery 社区 ， 只 有 参与 其 中 ,潜心 钴 研 ， 才 能 获得 切身 体验 。 我 们 囊 
心 硕 望 本 书 读者 有 朝 一 日 都 能 够 加 入 jQuery 社区 。 无 论 是 加 入 我 们 的 论坛 、 邮 件 列表 还 是 博客 ， 
jQuery 社区 都 能 为 你 更 好 地 利用 jQuery 提供 各 方面 帮助 。 

对 我 个 人 而 言 ，jQuery 绝 不 仅仅 就 是 一 些 代 码 块 那 么 简单 ， 它 是 这 几 年 来 ,为 了 让 这 个 库 更 
有 价值 ,社区 成 员 日 积 月 累 的 所 有 经 验 的 大 汇聚 。 其 中 草 涵 着 一 次 次 惊 心 动 鲍 的 起 起 落落 ,一 次 
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次 开发 过 程 中 的 奋斗 挣扎 , 当然 还 有 看 着 它 不 断 成 长 和 成 功 带 来 的 喜悦 。 它 贴近 用 户 和 团队 成 员 ， 
反映 他 们 的 需求 ,并且 日 益 成 长 完善 。 

我 一 开始 看 到 这 本 书 将 jQuery 作为 一 个 统一 的 工具 来 讨论 时 ， 第 一 感觉 是 书 中 介绍 的 jQuery 
跟 我 印象 中 汇聚 各 种 经 验 的 jQuery 不 太一 样 ， 但 吃惊 之 余 ， 更 多 的 还 是 心潮 澎 洲 。 能 够 看 到 别人 
通过 学 习 、 理 解 进而 塑造 出 的 jQuery， 作 为 项 目 创始 人 而 言 ， 其 创造 之 乐 也 英 过 如 此 了 1 

我 决 不 是 唯一 超越 工具 一 使 用 者 关系 层面 去 欣赏 jQuery 的 人 。 我 不 确定 能 否 准确 地 罗列 出 原 
因 ， 但 我 已 经 多 次 看 到 这 样 的 场面 一 一 当 用 户 懂 然 领悟 到 jQuery 的 效力 时 ， 他 们 的 脸 上 会 情 不 自 
禁地 流露 出 会 心 的 微笑 。 

还 有 一 个 特别 的 时 刻 ， 也 只 有 jQuery 用 户 才 能 体会 到 一 一 有 一 天 ， 他 们 会 突然 意识 到 自己 使 
用 的 工具 , 实际 上 远 远 不 是 一 个 简单 的 工具 , 他 们 将 顿悟 原来 可 以 彻底 换个 思维 方式 来 编写 动态 
Web 应 用 程序 。 想 想 吧 ,那个 时 刻 将 会 多 么 美妙 ,而 我 认为 这 绝对 是 jQuery 项 目 最 大 的 价值 所 在 。 

希望 手 捧 本 书 的 读者 朋友 ， 也 能 够 体验 到 那 美妙 的 时 刻 。 











John Resig 
jQuery 创建 人 
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2005 年 ， 受 该 领域 的 先驱 人 物 Dean Edwards 和 Simon Willison 等 人 的 启发 ，John Resig 编 写 了 
套 函 数 ， 利 用 这 些 函 数 能 够 以 编程 方式 快速 查找 网 页 中 的 元 素 ， 并 为 这 些 元 素 指定 行为 。2006 年 1 
月 ， 当 他 首次 发 布 这 个 项 目 时 ， 其 中 已 经 包含 了 DOM 操 作 和 基本 的 动画 功能 。 他 把 这 个 项 目 命名 
为 jQuery， 意 在 强调 其 查找 或 “查询 ”网 页 元 素 ， 并 通过 JavaScript 操 作 这 些 元 素 的 核心 用 途 。 随 着 
时 间 推 移 ，jQuery 的 功能 越 来 越 丰富 ， 性 能 逐步 提升 ， 同 时 也 被 因特网 上 一 些 最 有 名 的 站 点 广泛 采 
用 。 尽管 Resig 后 来 不 再 领导 该 项 目的 开发 , 但 jQuery 作为 一 个 真正 开源 的 项 目 , 已 经 拥有 了 一 个 足 
以 傲视 群雄 的 、 由 Dave Methvin 领 导 的 核心 团队 ， 以 及 成 千 上 万 名 开发 人 员 组 成 的 活跃 社区 。 

jQuery 是 一 个 强大 的 JavaScript 库 ， 无 论 你 具有 什么 编程 背景 ， 都 可 以 通过 它 来 增强 自己 的 
网 站 。jQuery 在 一 个 紧凑 的 文件 中 提供 了 丰富 多 样 的 特性 、 简 单 易学 的 语法 和 稳健 的 跨 平台 兼容 
性 。 此 外 ， 数 百 种 为 扩展 jQuery 功能 而 开发 的 插件 ， 更 使 得 它 几 乎 成 为 适用 于 各 类 客户 端 脚本 编 
程 的 必 备 工具 。 

本 书 以 通俗 易 懂 的 方式 介绍 了 jQuery 的 基本 概念 。 通 过 学 习 本 书 ， 即 使 曾经 因 编 写 JavaScript 
而 受过 挫折 的 人 ， 也 能 够 掌握 为 网 页 添加 交互 和 动态 效果 的 技术 。 本 书 将 引导 读者 跨越 Ajax、 
件 、 效 果 及 高 级 JavaScript 语 言 特性 中 的 各 种 陷阱 ， 同 时 给 出 需要 在 实际 开发 中 反复 用 到 的 jQuery 
库 特 性 的 简明 参考 。 


本 书 内容 


第 1 章 将 引领 读者 对 jQuery 有 个 大 概 的 了 解 。 这 一 章 先 简单 介绍 jQuery 及 其 用 途 , 然后 涉及 如 
何 下 载 和 设置 jQuery 库 ， 同 时 也 会 指导 你 使 用 jQuery 编写 第 一 个 脚本 。 

第 2 章 讲述 如 何 通过 jQuery 中 的 选择 符 表 达 式 及 DOM 遍 历 方法 ， 在 页 面 中 的 任何 地 方 找到 想 
要 的 元 素 。 这 一 章 将 展示 如 何 使 用 各 种 选择 符 表 达 式 为 页 面 中 的 不 同 元 素 添加 样式 , 其 中 一 些 是 
通过 纯 CSS 方 式 做 不 到 的 。 

第 3 章 介绍 如 何 通 过 jQuery 的 事件 处 理 机 制 ， 在 浏览 器 发 生 事件 时 触发 行为 。 同 时 ， 还 会 介 
绍 如 何以 不 唐 突 的 方式 添加 事件 (甚至 在 页 面 加 载 完成 之 前 )。 此 外 ， 这 一 章 还 将 深入 更 高 级 的 
主题 ， 例 如 事件 冒 泡 、 委 托 和 命名 空间 。 

第 4 章 介 绍 通过 jQuery 实现 动画 的 技术 ， 我 们 将 学 会 隐藏 、 显 示 和 移动 页 面 元 素 ， 获 得 赏 心 
悦目 的 效果 。 
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第 5 章 计 述 如 何 通过 过 命令 改变 页 面 。 这 一 章 讲述 的 是 动态 修改 HTML 文档 结构 及 其 内 容 的 技术 。 
第 6 章 讨 论 通 过 jQuery 轻松 访问 服务 器 端 功 能 的 各 种 方法 ， 而 且 不 用 像 过 去 那样 笨拙 地 刷新 
页 面 。 在 掌握 了 这 个 库 的 基本 概念 之 后 ， 接 下 来 就 可 以 探索 如 何 根据 需要 来 扩展 这 个 库 了 。 
第 7 章 介 绍 如 何 查 找 、 安 装 和 使 用 插件 ， 包 括 强 大 的 jQuery UI 和 jQuery Mobile 插 件 库 。 
第 8 童 讨 论 如 何 利 用 jQuery 强大 的 扩展 能 力 ， 从 头 开 发 自己 的 插件 。 不 仪 包括 创建 自己 的 实 
用 函数 ， 还 有 添加 jQuery 对 象 方法 ， 以 及 使 用 jQuery UI 部 件 工厂 。 接 下 来 的 几 章 更 加 深入 地 探讨 
了 jQuery 的 各 种 特性 ， 在 这 几 章 里 将 学 习 到 很 多 高 级 的 技术 。 
第 9 章 重 温 关 于 选择 符 和 遍历 的 知识 , 讲解 了 如 何 优化 选择 符 的 性 能 , 如 何 操作 DOM 元 素 栈 ， 
号 及 及 写 插 件 扩展 选择 和 遍历 功能 。 
第 10 章 深入 讨论 委托 、 截 流 等 大 幅 提 供 事 件 处 理性 能 的 技术 。 同 时, 还 将 介绍 通过 扩展 jQuery 
创建 自 定义 事件 和 特殊 事件 的 内 容 。 
第 11 章 挖 气 了 jQuery 效果 特性 的 潜力 ， 这 一 章 不 仅 要 讲解 如 何 编写 自 定义 缓 动 函数 ， 还 会 介 
绍 在 动画 的 每 一 阶段 执行 操作 ， 以 及 通过 自 定义 队列 提前 将 各 种 操作 排队 。 
第 12 章 介绍 与 操作 DOM 相 关 的 更 实用 的 技术 ,包括 将 任意 数据 附加 到 元 素 。 此 外 ， 这 一 
也 会 讨论 如 何 扩展 jQuery 处 理 元 素 的 CSS 属 性 的 能 
第 13 章 将 带领 读者 深入 理解 Ajax 相关 的 概念 ， 包 括 jQuery 的 延迟 处 理 机 制 ， 从 而 实现 等 待 数 
据 在 一 段 时 间 后 可 用 时 再 对 其 进行 处 理 。 
附录 A 将 帮助 读者 理解 闭 包 一 一 什么 是 财 包 ， 怎 么 利用 闭 包 。 
附录 B 向 读者 介绍 使 用 jQUnit 库 对 JavaScript 程 序 进行 单元 测试 。 这 个 库 是 开发 和 维护 高 度 完 
善 的 Web 应 用 所 必须 的 工具 。 
附录 C 提 供 了 jQuery 的 简明 参考 ， 包 括 所 有 方法 和 选择 符 表达 式 。 在 实际 开发 中 ， 明 确 自己 
目标 的 情况 下 ， 通 过 这 个 简单 明了 的 附录 ， 能 够 方便 快捷 地 找到 正确 的 方法 和 选择 符 。 


阅读 本 书 要 求 
为 了 运行 本 书 的 示例 代码 ， 读 者 需要 安装 Chrome 、Firefox 、Safari 或 微软 的 Internet Explorer 
浏览 
















































































































































































类 试 修改 本 书 示 例 及 完成 每 音 未 尾 的 练 ， 还 需要 : 

口 一 个 文本 编辑 器 ; 

口 浏览 器 中 的 Web 开 发 工具 ， 如 Chrome 开 发 者 工具 或 Firebug ( 详 见 第 1 章 1.5 节 ); 
口 每 章 的 源 代码 文件 和 一 份 jQuery 库 文件 ( 见 后 面 的 “下 载 代 码 ” 部 分 )。 
此 外 ， 要 运行 第 6 章 及 其 后 续 章 节 的 Ajax 示例 ， 还 需要 配置 支持 PHP 的 服务 器 。 


本 书 读者 对 象 


本 书 适 合 想 在 自己 的 设计 中 添加 交互 元 素 的 Web 设 计 者 ， 也 适合 想 在 自己 的 Web 应 用 中 创 
建 最 佳 用 户 界 面 的 开发 者 。 读 者 需要 具备 基本 的 JavaScript 编 程 知 识 和 HTML 及 CSS 基 础 知识 ， 
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并 且 应 该 熟悉 JavaScript 语 法 。 但 是 ， 不 需要 有 jQuery 的 知识 ， 也 不 必 拥 有 其 他 JavaScript 库 的 
使 用 经 验 。 
通过 阅读 本 书 ， 读 者 能 够 由 浅 和 人 深 地 掌握 jQuery 1.10.x 及 jQuery 2.0.x 版 的 功能 及 语法 。 


本 书 约定 


在 本 书 中 ， 读 者 会 发 现 针对 不 同 信息 类 型 的 文本 样式 。 下 面 是 这 些 样式 的 示例 和 解释 。 
正文 中 提 到 的 代码 如 下 所 示 :“ 此 外 , 通过 使 用 console.1og() 方 法 可 以 在 代码 中 直接 下 控 
制 台 交互 。” 


代码 段 版 式 如 下 所 示 : 


$s (document) .ready (function() { 
$s('div.poem-stanza') .addClass ('highlight'); 
> 


当 需 要 读者 特别 注意 代码 块 中 的 某 一 部 分 时 ， 相 关 的 代码 行 或 项 将 以 粗 体 印刷 : 


$('#switcher-narrow') .bind('click', function() { 
$('body') .removeClass().addClass('narrow'); 


})3 
新 术语 及 重要 词汇 将 以 粗 体 字 显示 。 


[ 这 里 给 出 重要 的 注意 事项 。 | 
» 
这 里 给 出 提示 和 技巧 。 


读者 反馈 


我 们 始终 欢迎 来 自 读者 的 反馈 意见 。 我 们 想 知 道 读 者 对 本 书 的 看 法 , 读者 喜欢 哪些 内 容 或 不 
喜欢 哪些 内 容 。 读 者 真正 深 有 感触 的 反馈 ， 对 于 我 们 开发 图 书 产品 至 关 重 要 。 

如 有 反馈 意见 , 请 将 电子 邮件 发 送 到 feedback@packtpub.com, 不 要 忘记 在 邮件 标题 中 注 明 你 
要 评论 的 书 名 。 

如 果 读 者 对 某 个 主题 有 经 验 或 者 有 兴趣 , 愿意 撰写 或 参与 撰写 一 本 书 , 请 查阅 www.packtpub. 
com/authors 页 面 中 的 作者 指南 。 


客户 支持 
为 了 让 你 的 付出 得 到 最 大 的 回报 ， 请 注意 以 下 信息 。 
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下 载 代码 


访问 http:/www.packtpub.com/， 可 以 下 载 本 书 及 你 所 购买 的 所 有 Packt 图 书 的 示例 代码 ?。 如 
尔 是 从 其 他 地 方 购买 的 本 书 英文 版 ， 可 以 访问 http:/www.packtpub.com/support 并 注册 ， 以 便 通 
电子 邮件 取得 示例 文件 。 

此 外 ,访问 http://book.learningjquery.com/ 可 以 在 浏览 器 中 以 交互 方式 体验 本 书 示 例 。 


勘误 


虽然 我 们 会 全 力 确 保本 书 内 容 的 准确 性 ， 但 错误 仍 在 所 难免 。 如 果 你 发 现 了 本 书 中 的 错误 
( 包括 文字 和 代码 错误 ), 而 且 愿 意向 我 们 提交 这 些 错误 ,我 们 会 十 分 感激 。 这 样 一 来 ,不 仅 可 以 
减少 其 他 读者 的 疑虑 ， 也 有 助 于 本 书后 续 版 本 的 改进 。 要 提交 你 发 现 的 错误 ， 请 访问 http://www. 


packtpub.com/submit-errata。 


举报 盗版 


互联 网 上 对 受 版 权 法 保护 的 作品 的 盗版 行为 始终 存在 ， 涉 及 各 种 媒体 。Packt 对 版 权 的 保护 
和 许可 非常 重视 ,如 果 读 者 在 互联 网 上 看 到 了 我 们 出 版 物 的 盗版 , 无 论 什 么 形式 , 请 告诉 我 们 该 
盗版 的 具体 链接 或 所 在 网 站 的 名 字 ， 以 便 我 们 采取 补救 措施 。 

请 把 涉嫌 包含 盗版 资料 的 链接 发 送 到 copyright@packtpub.com。 

非常 感谢 你 出 手 保 护 作 者 的 权益 以 及 我 们 继续 为 您 提供 有 价值 内 容 的 能 


疑难 解答 


如 果 你 对 本 书 的 某 些 方面 有 疑问 ， 请 将 电子 邮件 发 送 到 questions@packtpub.com， 我 们 会 尽 
力 解 决 。 
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QO@ 读者 可 从 图 灵 社 区 本 书页 面 ( http://ituring.cn/book/1169 ) 下 载 示 例 代码 、 提 交 勘 误 。 一 一 编者 注 
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今天 的 万 维 网 是 一 个 动态 的 环境 ，Web 用 户 对 网 站 的 设计 和 功能 都 提出 了 高 要 求 。 为 了 构建 
有 吸引 力 的 交互 式 网 站 , 开发 者 们 借助 于 像 jQuery 这 样 的 JavaScript 库 ， 实 现 了 常见 任务 的 自动 化 
和 复杂 任务 的 简单 化 。jQuery 库 广 受 欢迎 的 一 个 原因 ， 就 是 它 对 种 类 繁多 的 开发 任务 都 能 游 力 有 
余地 提供 帮助 。 

由 于 jQuery 的 功能 如 此 丰富 多 样 ， 找 到 合适 的 切入 点 似乎 都 成 了 一 项 挑战 。 不 过 ， 这 个 库 的 
设计 秉承 了 一 致 性 与 对 称 性 原则 ， 它 的 大 部 分 概念 都 是 从 HTML 和 CSS ( Cascading Style Sheet， 
层 释 样 式 表 ) 的 结构 中 借用 而 来 的 。 这 个 库 的 设计 让 很 多 编程 经 验 并 不 丰富 的 设计 人 员 能 够 很 快 
就 掌握 它 ， 因 为 这 些 人 对 HTML 和 CSS 要 比 对 JavaScript 更 熟悉 。 实 际 上 ， 在 本 书 开篇 第 1 章 中 ， 
只 需 3 行 代码 就 能 编写 一 个 有 用 的 jQuery 程序 。 另 外 ， 经 验 丰富 的 程序 设计 人 员 也 会 受益 于 这 种 
概念 上 的 一 致 性 ， 通 过 学 习 后 面 的 更 高 级 内 容 ， 你 会 感受 到 这 一 点 。 

本 章 将 介绍 如 下 内 容 : 

D jQuery 的 主要 特点 ; 

口 建立 jQuery 编码 环境 ; 

口 简单 jQuery 脚本 示例 ; 

口 选择 jQuery 而 不 是 纯 JavaScript 的 理由 ; 
口 常用 JavaScript 开 发 工具 。 


1.1 jQuery 能 做 什么 


jQuery 库 为 Web 脚 本 编程 提供 了 通用 的 抽象 屋 ， 使 得 它 几乎 适用 于 任何 脚本 编程 的 情形 。 由 
于 它 容易 扩展 而 且 不 断 有 新 插件 面世 增强 它 的 功能 , 所 以 一 本 书 根本 无 法 涵盖 它 所 有 可 能 的 用 途 
和 功能 。 抛 开 这 些 不 谈 ， 仅 就 其 核心 特性 而 言 ，jQuery 能 够 满足 下 列 需求 。 
口 取得 文档 中 的 元 素 。 如 果 不 使 用 JavaScript 库 ， 遍 历 DOM ( Document Object Model， 文 档 
对 象 模型 ) 树 , 以 及 查找 HTML 文档 结构 中 某 个 特殊 的 部 分 , 必须 编写 很 多 行 代 码 。jQuery 
为 准确 地 获取 需要 检查 或 操纵 的 文档 元 素 ， 提 供 了 可 靠 而 富有 效率 的 选择 符 机 制 。 
$s('div.content').find('p'); 


口 修改 页 面 的 外 观 。 CSS 虽 然 为 影响 文档 呈现 的 方式 提供 了 一 种 强大 的 手段 , 但 当 所 有 浏览 
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器 不 完全 支持 相同 的 标准 时 , 单纯 使 用 CSS 就 会 显得 力不从心 jQuery 可 以 弥补 这 一 不 足 ， 
它 提供 了 跨 浏 览 器 的 标准 解决 方案 。 而且， 即使 在 页 面 已 经 时 现 之 后 , jQuery 仍然 能 够 改 
变 文 档 中 某 个 部 分 的 类 或 者 个 别 的 样式 属性 。 

$('ul > li:first').addClass('active'); 

口 改变 文档 的 内 容 。jQuery 能 够 影响 的 范围 并 不 局 限于 简单 的 外 观 变化 ， 使 用 少量 的 代码 ， 
jQuery 就 能 改变 文档 的 内 容 。 可 以 改变 文本 、 插 入 或 翻转 图 像 、 列 表 重 新 排序 ， 甚 至 对 
HTML 文 档 的 整个 结构 都 能 重 写 和 扩充 一 一 所 有 这 些 只 需 一 个 简单 易 用 的 API。 
$('#container') .append('<a href="more.html">more</a>'); 

口 响应 用 户 的 交互 操作 。 即 使 是 最 强大 和 最 精心 设计 的 行为 ， 如 果 我 们 无 法 控制 它 何 时 发 
生 , 那 它 也 毫 无 用 处 。jQuery 提 供 了 截获 形形色色 的 页 面 事件 〈 比如 用 户 单 击 某 个 链接 ) 
的 适当 方式 ， 而 不 需要 使 用 事件 处 理 程序 拆散 HIML 人 代码。 此 外 ， 它 的 事件 处 理 API 也 消 
除了 经 常 困扰 Web 开 发 人 员 浏 览 右 的 不 一 致 性 。 
$('button.show-details').click(function() { 


$s('div.details').show(); 
})3 


口 为 页 面 添 加 动态 效果 。 为 了 实现 某 种 交互 式 行为 , 设计 者 也 必须 向 用 户 提 供 视 觉 上 的 反 
馈 。jQuery 中 内 置 的 一 批 淡 入 、 擦 除 之 类 的 效果 ， 以 及 制作 新 效果 的 工具 包 ， 为 此 提供 
了 便利 。 

$s('div.details').slideDown(); 

口 无 需 刷新 页 面 从 服务 器 获取 信息 。 这 种 编程 模式 就 是 众所周知 的 Ajax ( Asynchronous 
JavaScript and XML ， 异 步 JavaScript 和 XML )， 它 是 一 系列 在 客户 端 和 服务 器 之 间 传 输 数 
据 的 强大 技术 。jQuery 通 过 消除 这 一 过 程 中 的 浏览 器 特定 的 复杂 性 , 使 开发 人 员 得 以 专注 
于 服务 器 端的 功能 设计 ， 从 而 得 以 创建 出 反应 灵敏 、 功 能 丰富 的 网 站 。 

$s('div.details').load('more.html #Content ' ) 

口 简化 常见 的 JavaScript 任 务 。 除 了 这 些 完 全 针对 文档 的 特性 之 外 ，jQuery 也 改进 了 对 基本 
的 JavaScript 数 据 结 构 的 操作 ( 例如 过 代 和 数组 操作 等 )。 


$.each(obj, function(key, value) { 
total += value; 


}); 


1.2 jQuery 为 什么 如 此 出 色 


随 着 近年 来 人 们 对 动态 HTML 兴 趣 的 复苏 , 众生 了 一 大 批 JavaScript 框 架 。 有 的 特别 专注 于 上 
述 任 务 中 的 一 项 或 两 项 , 有 的 则 试图 以 预 打 包 的 形式 吉 括 各 种 可 能 的 行为 和 动态 效果 。 为 了 在 维 
持 上 述 各 种 特性 的 同时 仍然 保持 紧凑 的 代码 ，jQuery 采 用 了 如 下 策略 。 

口 利用 CSS 的 优势 。 通过 将 查找 页 面 元 素 的 机 制 构建 于 CSS 选 择 符 之 上 , jQuery 继承 了 简明 
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清晰 地 表达 文档 结构 的 方式 。 由 于 进行 专业 Web 开 发 的 一 个 必要 条 件 是 掌握 CSS 语 法 ， EE 
而 jQuery 成 为 希望 向 页 面 中 添加 行为 的 设计 者 们 的 切入 点 。 
口 支持 扩展 。 为 了 避免 特性 蠕 变 ( feature creep ) ”，jQuery 将 特殊 情况 下 使 用 的 工具 归 入 插 
件 当 中 。 创 建新 插件 的 方法 很 简单 ， 而 且 拥 有 完备 的 文档 说 明 ， 这 促进 了 大 量 有 创意 且 
有 实用 价值 的 模块 的 开发 。 甚至 在 下 载 的 基本 jQuery 库 文件 当中 , 多 数 特 性 在 内 部 都 是 通 
过 插件 架构 实现 的 。 而 且 ， 如 有 必要 ， 可 以 移 除 这 些 内 部 插件 ， 从 而 生成 更 小 的 库 文件 。 
口 抽象 浏览 器 不 一 致 性 。Web 开 发 领域 中 一 个 令 人 遗憾 的 事实 是 , 每 种 浏览 需 对 颁布 的 标准 
都 有 自己 的 一 套 不 太一 致 的 实现 方案 。 任 何 Web 应 用 程序 中 都 会 包含 一 个 用 于 处 理 这 些 平 
台 间 特性 差异 的 重要 组 成 部 分 。 虽 然 不 断 发 展 的 浏览 右前 景 ， 使 得 为 某 些 高 级 特性 提供 
浏览 器 中 立 的 完美 的 基础 代码 ( code base ) 变 得 不 大 可 能 ,但 jQuery 添加 一 个 抽象 层 来 标 
准 化 常见 的 任务 ， 从 而 有 效 地 减少 了 代码 量 ， 同 时 ， 也 极 大 地 简化 了 这 些 任 务 。 
口 总 是 面向 集合 。 当 我 们 指示 jQuery“ 找 到 带 有 collapsible 类 的 全 部 元 素 ， 然 后 隐藏 它 
们 ”时 ， 不 需要 循环 遍历 每 一 个 返回 的 元 素 。 相 反 ，.hiae() 之 类 的 方法 被 设计 成 自动 
操作 对 象 集合 ， 而 不 是 单独 的 对 象 。 利 用 这 种 称 作 隐 式 迭代 implicit iteration ) 的 技术 ， 
就 可 以 抛弃 那些 腔 肿 的 循环 结构 ， 从 而 大 幅 地 减少 代码 量 。 
口 将 多 重 操作 集 于 一 行 。 为 了 避免 过 度 使 用 临时 变量 或 不 必要 的 代码 重复 , jQuery 在 其 多 数 
方法 中 采用 了 一 种 称 作 连 缀 ( chaining ) “的 编程 模式 。 这 种 模式 意味 着 基于 一 个 对 象 进 
行 的 多 数 操作 的 结果 ， 都 会 返回 这 个 对 象 自身 ， 以 便 为 该 对 象 应 用 下 一 次 操作 。 
这 些 策略 不 仅 保证 了 jQuery 包 的 小 型 化 ， 也 为 我 们 使 用 这 个 库 创建 简洁 的 自 定义 代码 提供 了 
技术 保障 。 
jQuery 库 的 适用 性 一 方面 要 归 因 于 其 设计 理念 , 男 一 方面 则 得 益 于 围绕 这 个 开源 项 目 涌现 出 
的 活跃 社区 的 促进 作用 。jQuery 用 户 聚 集 到 一 起 ， 不 仅 会 讨论 插件 的 开发 ， 也 会 讨论 如 何 增强 核 
心 库 。 用 户 和 开发 人 员 也 对 jQuery 的 官方 文档 给 予 了 持续 的 帮助 , 该 文档 的 地 址 为 http://api.jquery. 
com。 
jQuery 为 Web 开 发 人 员 提 供 了 灵活 且 健 壮 的 系统 ， 而 且 它 对 所 有 人 都 是 免费 的 。 这 个 开源 项 
目 遵循 MIT License 发 布 ， 任 何 站 点 和 专 有 的 软件 都 可 以 自由 使 用 它 。 如 果 项 目 需要 ， 还 可 以 基 
于 GNU Public License 重 新 发 布 它 ， 以 便 与 其 他 基于 GNU 许 可 的 开源 项 目 整 合 。 
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了 解 jQuery 能 够 提供 的 丰富 特性 之 后 ， 我 们 可 以 来 看 一 看 这 个 库 的 实际 应 用 了 。 为 此 ,我 们 
需要 下 载 一 个 jQuery 的 副本 。 
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GD 术语 feature creep 也 有 人 译 为 特性 蔓延 , 指 软件 应 用 开发 中 过 分 强调 新 的 功能 以 至 于 损害 了 其 他 的 设计 目标 , 例如 
简洁 性 、 轻 巧 性 、 稳 定性 及 错误 出 现 率 等 。 

@) 术语 chaining 可 译 为 链接 ,但 为 避免 与 人 们 耳熟能详 的 超级 链接 混淆 ( 如 常见 的 “ 单 击 链接 ”等 )， 所 以 才 译 为 更 
贴切 的 连 级。 
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1.3.1 下 载 jQuery 


jQuery 不 需要 安装 ， 要 使 用 它 只 需 该 文件 的 一 个 副本 ,该 副本 可 以 放 在 外 部 站 点 上 ， 也 可 以 
放 在 自己 的 服务 器 上 。 由 于 JavaScript 是 一 种 解释 型 语言 , 所 以 不 必 担 心 编译 和 构建 。 什 么 时 候 需 
要 使 用 jQuery， 只 要 在 HTML 文档 中 使 用 <script> 元 素 把 它 导 入 进来 即 可 。 

jQuery 官方 网 站 (http:Wjquery.comy/ ) 始终 都 包含 该 库 最 新 的 稳定 版 本 ， 通 过 官网 的 首页 就 
可 以 下 载 。 官 方 网 站 在 任何 时 候 都 会 提供 几 种 不 同 版 本 的 jQuery 库 ， 但 其 中 最 适合 我 们 的 是 该 库 
最 新 的 未 压缩 版 。 而 在 正式 发 布 的 页 面 中 ， 则 可 以 使 用 压缩 版 。 

随 着 jQuery 的 日 益 流 行 ， 很 多 公司 都 通过 自己 的 CDN ( Content Delivery Networks ， 内 容 分 发 
网 络 ) 来 托管 其 库 文件 ， 让 开发 人 员 能 更 方便 地 使 用 它 。 最 典型 的 就 是 谷歌 ( https:// 
developers.google.com/speed/libraries/devguide ) 和 微软 (http:/www.asp.net/ajaxlibrary/cdn.ashx ) 
和 jQuery 项 目 自己 的 服务 器 (http://code.jquery.com/ )，jQuery 库 文件 被 放 在 了 强劲 、 低 延 时 的 服 
务 器 上 ， 这 些 服 务 器 遍布 全 球 各 地 ， 无 论 用 户 在 哪个 国家 ， 都 能 以 最 快速 度 下 载 到 jQuery。 虽 然 
托管 在 CDN 上 的 文件 由 于 分 布 式 和 缓存 的 原因 有 速度 优势 ,但 在 实际 开发 中 还 是 使 用 本 地 副本 更 
方便 一 些 。 本 书 中 的 所 有 示例 都 将 使 用 一 个 保存 在 本 地 的 jQuery 库 文件 ， 这 样 即使 不 上 网 也 可 以 
运行 代码 。 


1.3.2 ”本 书 使 用 jQuery 的 哪个 版 本 


如 果 是 以 前 ， 这 个 问题 很 容易 回答 。 因 为 一 般 来 说 ， 最 合适 的 版 本 就 是 jQuery 的 最 新 版 本 。 
可 是 ， 对 于 现 有 的 jQuery 2.0 版 来 说 ， 问 题 就 复杂 一 点 了 。 为 了 确保 在 现代 浏览 器 中 速度 更 快 ， 
代码 更 简洁 ，jQuery 从 2.0 版 开始 不 再 支持 IE6、IE7 和 IE8。 

jQuery 开发 团队 知道 ， 支 持 这 些 老 版 本 浏览 絮 也 很 重要 。 正 因为 如 此 ， 该 团队 还 会 继续 维护 
jQuery 1.x 版 。 本 书 出 于 讲解 的 需要 使 用 jQuery 1.10 。 不 过 ， 全 书 所 有 示例 都 能 在 jQuery 2.0 下 


运行 。 





























































































































如 果 项 目 中 有 针对 jQuery 1.9 之 前 的 版 本 编写 的 代码 , 可 以 使 用 jQuery 迁移 插 
件 (http:Wjquery.com/upgrade-guide/1.9/ 攀 query-migrate-plugin ) 实现 与 jQuery 1.10 


1.3.3 在 HTML 文 档 中 引入 jQuery 


本 书 多 数 jQuery 应 用 示例 都 包含 以 下 三 部 分 : HTML 文 档 ， 为 该 文档 添加 样式 的 CSS 文 件 ， 
以 及 为 该 文档 添加 行为 的 JavaScript 文 件 。 在 本 书 的 第 一 个 例子 中 , 我 们 使 用 一 个 包含 图 书 内 容 提 
要 的 页 面 ， 同 时 ， 该 页 面 中 的 很 多 部 分 都 添加 了 相应 的 类 。 这 个 页 面 中 包含 对 最 新 版 jQuery 库 的 
引用 , 我 们 将 这 个 文件 下 载 之 后 将 它 重 命名 为 jqueryjs, 并 放 在 本 地 项 目 文件 夹 下 。 示例 的 HTML 
文档 如 下 。 
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<!DOCTYPE html> 








<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Through the Looking-Glass</title> 


<link rel="stylesheet" href="01.css"> 


<script src="jquery.js"></script> 
<BOrFIDE .SEG= "0 JS"S< /SOIiDtS 
</head> 


<body> 
<hl>Through the Looking-Glass</hi1> 
<div class="author">by Lewis Carroll</div> 
<div class="chapter" id="chapter-1"> 
<h2 class="chapter-title">1. Looking-Glass House</h2> 
<p>There was a book lying near Alice on the table， 
and while she sat watching the White King (for she 
was still a little anxious about him, and had the 
ink all ready to throw over him, in case he fainted 
again), she turned over the leaves, to find some 
part that she could read, <span class="spoken"> 
"gmdash; for it's all in some language I don't know," 
</span> she said to herself.</p> 
<p>It was like this.</p> 
<div class="poem"> 
<h3 class="poem-title">YKCOWREBBAJ</h3> 
<div class="poem-stanza"> 
<div>sevot yhtils eht dna ,gillirb sawT'</div> 
<div>;ebaw eht ni elbmig dna eryg diD</div> 
<div>,sevogorob eht erew ysmim llA</div> 
<div>.ebargtuo shtar emom eht dnA</div> 
/LY 
</div> 
<p>She puzzled over this for some time, but at last 
a bright thought struck her. <span class="spoken"> 
"Why, it's a Looking-glass book, of course! And if 
I hold it up to a glass, the words will all go the 
right way again."</span></p> 
<p>This was the poem that Alice read.</p> 
<div class="poem"> 
<h3 class="poem-title">JABBERWOCKY</h3> 
<div class="poem-stanza"> 
<div>'Twas brillig, and the slithy toves</div> 
<div>Did gyre and gimble in the wabe;</div> 
<div>All mimsy were the borogoves,</div> 
<div>And the mome raths outgrabe.</div> 
</div> 
</div> 
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</div> 
</body> 
</html> 


文档 中 ， 紧 随 常规 的 HTML 开 头 代码 之 后 的 是 加 载 样式 表 文 件 的 代码 。 在 这 个 例子 中 , 我 们 
使 用 的 样式 比较 简单 。 


body { 
background-color: #fff; 
color: #000; 
font-family: Helvetica, Arial, sans-serif; 

} 

hi, hh2, hn3 { 
margin-bottom: .2em; 

} 

.poem { 
margin: 0 2em; 

} 

.highlight { 
background-color: #ccc; 
border: lpx solid #888; 
font-style: italic; 
margin: 0.5em 0; 
padding: 0.5em; 








下 载 示例 代码 

了 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上面 的 标记 只 是 完整 文 
档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完 整 的 示例 
代码 : Packt Publishing 网 站 http://www.packtpub.com/support ， 或 者 本 书 网 站 
http://book.learningjquery.com/。 





在 引用 样式 表 文 件 的 代码 之 后 ,是 包含 JavaScript 文 件 的 代码 。 这 里 要 注意 的 是 , 引用 jQuery 
库 文件 的 <script> 标 签 ,必须 放 在 引用 上 自 定 义 脚本 文件 的 <script> 标 签 之 前 。 否则 , 在 我 们 编 
写 的 代码 中 将 引用 不 到 jQuery 框架 。 























在 本 书 的 其 他 示例 中 ,我 们 将 只 印 出 HTML 和 CSS 文 件 的 相关 部 分 。 书 中 提 
~> 到 文件 的 完整 版 可 以 在 本 书 配 套 网 站 http://book.learningjquery.com 中 找到 。 


现在 ， 这 个 示例 页 面 的 外 观 如 图 1-1 所 示 。 
接 下 来 ， 我们 就 使 用 jQuery 为 页 面 中 的 诗歌 文本 添加 一 种 新 样式 。 


这 个 例子 是 为 了 展示 jQuery 的 简单 用 法 而 设计 的 。 在 实际 应 用 中 ， 为 页 面 中 
> 的 文本 添加 样式 可 以 通过 纯 CSS 的 方式 来 实现 。 


网 
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Through the Looking-Glass 


by Lewis Carroll 
1. Looking-Glass House 


There was a book lying near Alice on the table, and while she sat watching the White King (for she was still a 
little anxious about him, and had the ink all ready to throw over him, in case he fainted again), she turned over 
the leaves, to find some part that she could read, "一 for it's all in some language I don'‘t know,” she said to 
herself. 


It was like this. 


YKCOWREBBA]J 

sevot yhtils eht dna ,gillirb sawT" 
;ebaw eht ni elbmig dna eryg diD 
:Sevogorob eht erew ysmim IIA 
:ebargtuo shtar emom eht dnA 


She puzzled over this for some time, but at last a bright thought struck her “Why, it's a Looking-glass book, of 
course! And if I hold it up to a glass, the words will all go the right way again.” 


This was the poem that Alice read. 


JABBERWOCKY 

'Twas brillig, and the slithy toves 
Did gyre and gimble in the wabe; 
All mimsy were the borogoves, 
And the mome raths outgrabe. 














1.3.4 编写 jQuery 代码 


我 们 自 定 义 的 代码 应 该 放 在 HTML 文 档 中 第 二 个 、 使 用 <script src="01.js"> </script> 
标签 引入 的 空 JavaScript 文 件 中 。 对 这 个 例子 而 言 ， 我 们 只 需 编 写 3 行 代码 : 
$s(document) .ready (function() { 


$s('div.poem-stanza') .addClass ('highlight'); 
站) 过 


接 下 来 我 们 分 析 这 几 行 代码 。 

1. 查找 诗歌 文本 

jQuery 中 基本 的 操作 就 是 选择 文档 中 的 某 一 部 分 ， 这 是 通过 $ () 函数 来 完成 的 。 通 常 ， 该 函 
数 需要 一 个 字符 串 参 数 ， 参 数 中 可 以 包含 任何 CSS 选 择 符 表 达 式 。 在 这 个 例子 中 ,我 们 想 要 找到 
带 有 poem-stanza 类 的 所 有 <div> 元 素 ， 因 此 选择 符 非常 简单 。 不 过 , 在 本 书 其 他 章 中 , 我 们 还 
会 介绍 很 多 更 复杂 的 选择 符 表达 式 。 在 第 2 章 中 ， 我 们 要 讨论 的 就 是 查找 文档 部 分 的 不 同方 式 。 

这 里 用 到 的 $ () 函数 会 返回 一 个 新 的 jQuery 对 象 实 例 ， 它 是 我 们 从 现在 开始 就 要 打交道 的 基 
本 的 构建 块 。jQuery 对 象 中 会 封装 零 个 或 多 个 DOM 元 素 ， 并 允许 我 们 以 多 种 不 同 的 方式 与 这 些 
DOM 元 素 进行 交互 。 在 这 个 例子 中 ， 我 们 希望 修改 页 面 中 这 些 部 分 的 外 观 ， 而 为 了 完成 这 个 任 
务 ， 就 需要 改变 应 用 到 诗歌 文本 的 类 。 

2. 加 入 新 类 

本 例 中 ，.aqdclass () 方 法 的 作用 是 不 言 而 喻 的 , 它 会 将 一 个 CSS 类 应 用 到 我 们 选择 的 页 面 
元 素 。 这 个 方法 唯一 的 参数 就 是 要 添加 的 类 名 。.addclass () 方 法 及 其 反方 法 .removeclass () ， 
为 我 们 探索 jQuery 支持 的 各 种 选择 符 表 达 式 提供 了 便利 。 现 在 ， 这 个 例子 只 是 简单 地 添加 了 



































网 
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highlight 类 ， 而 我 们 的 样式 表 中 为 这 个 类 定义 的 是 带 边框 和 灰色 背景 的 斜体 文本 样式 。 

我 们 注意 到 ， 无 需 迭 代 操 作 就 能 为 所 有 诗歌 中 的 节 " 添 加 这 个 类 。 前 面 我 们 提 到 过 ，jQuery 
在 .addqclass () 等 方法 中 使 用 了 隐 式 迭代 机 制 ， 因 此 一 次 函数 调用 就 可 以 完成 对 所 有 选择 的 文 
档 部 分 的 修改 。 

3. 执行 代码 

综合 起 来 , $() 和 .aqdclass () 对 我 们 修改 诗歌 中 文本 的 外 观 已 经 够 用 了 。 但 是 ， 如 果 将 这 
行 代码 单独 插入 文档 的 头 部 , 不 会 有 任何 效果 。 通 常 , JavaScript 代 码 在 浏览 器 初次 遇 到 它们 时 就 
会 执行 ， 而 在 浏览 器 处 理 头 部 时 ，HTML 还 不 会 呈现 样式 。 因 此 ， 我 们 需要 将 代码 延迟 到 DOM 
可 用 时 再 执行 。 

通过 使 用 $ (document) .ready () 方 法 , jQuery 支持 我 们 预定 在 DOM 加 载 完 毕 后 调用 某 个 函 
数 , 而 不 必 等 待 页 面 中 的 图 像 加 载 。 尽管 不 使 用 jQuery, 也 可 以 做 到 这 种 预定 , 但 $ (document ) . 
ready () 为 我 们 提供 了 很 好 的 跨 浏 览 带 解 决 方案 ,涉及 如 下 功能 : 
口 尽 可 能 使 用 浏览 器 原生 的 DOM 就 绪 实 现 , 并 以 wingdow .onload 事 件 处 理 程序 作为 后 备 ; 
口 可 以 多 次 调用 $ (document) .ready () 并 按照 调用 它们 的 顺序 执行 ; 
口 即便 是 在 浏览 器 事件 发 生 之 后 把 函数 传 给 $ (document) .ready () , 这 些 函数 也 会 执行 ; 
口 异步 处 理事 件 的 预定 ， 必 要 时 脚本 可 以 延迟 执行 ; 
口 通过 重复 检查 一 个 几乎 与 DOM 同 时 可 用 的 方法 ， 在 较 早 版 本 的 浏览 需 中 模拟 DOM 就 绪 

事件 。 

.ready () 方 法 的 参数 可 以 是 一 个 已 经 定义 好 的 函数 的 引用 ， 如 下 面 的 代码 清单 1-1 所 示 。 


代码 清单 1-1 


function addHighlightClass() { 
$s('div.poem-stanza') .addClass('highlight'); 
} 






























































$s (document) .ready (addHighlightClass); 
然而 ， 正 如 原始 的 脚本 中 所 示 一 一 代码 清单 1-2 就 摘自 那里 ， 这 个 方法 也 可 以 接收 一 个 匿名 
函数 。 


代码 清单 1-2 


$s(document) .ready (function() { 
$s('div.poem-stanza') .addClass('highlight'); 
由 党 


这 种 匿名 函数 的 写作 在 jQuery 中 十 分 方便 ， 特 别 适 合 传递 那些 不 会 被 重用 的 函数 。 而 且 ， 与 
此 同时 创建 的 闭 包 也 是 一 种 非常 高 级 和 强大 的 工具 。 但 是 ,假如 处 理 不 当 的 话 ， 闭 包 也 会 给 我 们 
带 来 意 想 不 到 的 后 采 以 及 内 存 占用 问题 。 附 录 和 A 详细 介绍 了 闭 包 。 




















Q@ 即 类 为 .poem-stanza 的 文档 部 分 。 
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ij 写 好 JavaScript 代 码 之 后 ， 现 在 的 页 面 如 图 1-2 所 示 。 





Through the Looking-Glass 


by Lewis Carroll 
1. Looking-Glass House 


There was a book lying near Alice on the table, and while she sat watching the White King (for she was 
still a little anxious about him, and had the ink all ready to throw over him, in case he fainted again), she 
turned over the leaves, to find some part that she could read, "一 for it's all in some language I don't 
know,” she said to herself. 


It was like this. 


YKCOWREBBAJ 





sevot yhtils eht dna ,gillirb sawT” 
7ebaw eht ni elbmig dna eryg diD 
,sevogorob eht erew ysmim IIA 
-ebargtuo shtar emom eht dnA 








She puzzled over this for some time, but at last a bright thought struck her “Why, it's a Looking-glass 
book, of course! And if 1 hold it up to a glass, the words will all go the right way again.” 


This was the poem that Alice read. 


JABBERWOCKY 





| 
‘Twas brillig, and the slithy toves | 
Did gyre and gimble in the wabe; 
All mimsy were the borogoves, 
And the mome raths outgrabe. 

















1-2 


由 于 JavaScript 搬 入 了 highlight 类 ,页 面 中 的 两 节 诗 歌 文本 变 成 了 斜体 , 带 有 了 灰色 背景 


月 泵 ， 


并 且 被 包含 在 方 框 中 ; 这 些 样式 来 源 于 01.css 样 式 表 。 
1.4 纯 JavaScript 与 jQuery 


即便 是 像 刚 才 那 么 简单 的 任务 ， 如 果 不 用 jQuery 而 是 我 们 自己 手工 写 代 码 也 会 非常 麻烦 。 
用 纯 JavaScript 的 话 ， 可 以 通过 下 面 的 代码 清单 1-3 达 到 同样 的 目的 。 


代码 清单 1-3 


window.onload = function() { 





var divs = document .getElementsByTagName('div'); 
for (var i = 0; i < divs.length; i++) { 
if (hasClass (divs[i], 'poem-stanza') 
&& lIhasClass (divs[i], 'highlight')) { 





divs[i].className += ' highlight'; 
} 
} 
function hasClass( elem, cls ) { 
Var reClass = new RegExp(' ' + cls + ' '); 
return reClass.test(' ' + elem.className + ' '); 
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且 不 论 这 段 代 码 有 多 长 ,就 算 这 样 它 还 是 不 能 像 代 码 清单 1-2 中 的 jQuery 代码 一 样 处 理 多 种 可 
能 的 4 上 况 ， 比如 它 并 不 能 
口 人 
D 在 DOM 就 绪 后 马上 执行 ; 
口 利用 较 新 的 DOM 方 法 来 检索 元 素 和 执行 其 他 任务 ， 从 而 优化 代码 性 能 。 

两 相 比较 就 会 发 现 , jQuery 代码 不 仅 写 起 来 省 事 ， 读 起 来 简单 ， 而 且 也 比 纯 JavaScript 代 码 的 
执行 速度 更 快 。 


1.5 使 用 开发 工具 


通过 上 面 代码 的 比较 , 我 们 知道 jQuery 代码 与 对 应 的 纯 JavaScript 代 码 相 比 更 短 也 更 清楚 。 
是 ， 这 并 不 意味 着 我 们 写 出 的 代码 永远 不 会 有 bug， 或 者 永远 都 能 直观 地 理解 页 面 中 i 
么 。 如 果 能 有 一 些 标准 的 开发 工具 辅助 ， 编 写 起 jQuery 代码 来 就 会 更 轻松 流畅 。 

现代 浏览 器 中 一 般 都 内 置 了 高 质量 的 开发 工具 。 我 们 可 以 从 中 选择 自己 觉得 最 方便 的 工具 。 
下 面 列 出 了 一 些 推荐 工具 : 
口 Internet Explorer Developer Tools (http://msdn.microsoft.com/en-us/library/dd565628.aspx ); 
口 Safari Web Inspector (http://developer.apple.com/technologies/safari/developer-tools.htm! ); 
口 Chrome Developer Tools (https://developers.google.com/chrome-developer-tools/ ); 
口 Firefox 插 件 Firebug ( http://getfirebug.com ); 
口 Opera Dragonfly (http://www.opera.com/dragonfly/ )。 
上 面 列 出 来 的 这 些 工具 都 提供 了 类 似 的 功能 ， 比 如 : 
口 探测 及 修改 DOM; 
口 研究 CSS 及 页 面 表现 之 间 的 关系 ; 
口 通过 特殊 的 方法 方便 地 跟踪 脚本 执行 ; 
口 暂停 脚本 运行 及 检查 变量 值 。 

虽然 这 些 功 能 在 不 同 的 工具 中 会 有 所 变化 , 但 大 体 上 概念 是 相同 的 。 本 书 中 的 某 些 示例 需要 
用 到 这 么 一 个 工具 ,因此 我 们 就 以 Firebug 为 例 ,不 过 使 用 其 他 浏览 絮 的 开发 工具 也 没有 什么 问题 。 

































































Chrome 开 发 者 工具 


Chrome 开 发 者 工具 的 详细 使 用 说 明 可 以 在 它 的 主页 上 找到 : https://developers.google.com/ 
chrome-developer-tools/。 要 详细 介绍 这 个 工具 实在 有 些 复杂 ,不 过 在 此 介绍 一 些 与 本 书 关系 最 密 
切 的 功能 还 是 有 必要 的 。 





| 关于 屏幕 截图 
Chrome 开 发 者 工具 是 一 个 发 展 很 快 的 项 目 ， 因 此 下 面 的 屏幕 截图 不 一 定 与 
你 实际 看 到 的 完全 一 样 。 
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打开 Chrome 开 发 者 工具 后 ， 当 前 页 面 中 会 出 现 一 个 提供 信息 的 新 面板 。 在 面板 中 默认 的 EE 
Elements (元素 ) 标签 页 中 , 左 侧 显示 的 是 当前 页 面 的 结构 ， 右 侧 显示 的 是 当前 选中 元 素 的 详细 

信息 (例如 应 用 于 它 的 CSS 规 则 )。 在 研究 网 页 结构 ， 查 找 CSS 问 题 的 时 候 ， 这 个 标签 页 很 有 用 ， 

如 图 1-3 所 示 。 








[本 后 可 Developer Tools — http:/7book.dev/31457017 E 
= 世 5 ox 1 
ee SRDILS 
Elements | Resources Network Sources Timeline Profiles Audits Console Pagespeed 
Computed Style DShow inherited 


TStyles ro 
element.style { 





Vv<html lang="en"> 
* <head>..</head> 
<style type="text/css"></style> 
Y<body> 








<div id="container"> 1 
<| rou e ing-Glass</h1> Matched CSS Rules 
<div class="author">by Lewis Carroll</div> hl 91.css:29 
p<div class="chapter" id="chapter-l">-</div> font-size: 2.5em; 
</div> margin-bottom: Bi 
</body> » 
</html> hi user agent stylesheet 


display: block; 
一 一 一 


-webkit-margin-before: 8.67em; 
-webkit-margin-after: 9.67em; 
-webkit-margin-start: Bpx; 
-webkit-margin-end: Opx; 
font-weight: bold; 


Inherited from div#container 


#container { Q1.css:15 
Font—5iz2e+—+r2emt 

} 

Inherited from body 

body { Q1.css:19 


font:»62.5% Verdana, Helvetica, Arial, 
sans-serif; 
color: 加 #000; 


六 Metrics 
Bb Pronertiee 


回 , 注 A hm body div#container 四 .3 
图 1-3 


Sources( 资源 ) 标签 页 显示 的 是 页 面 中 加 载 的 所 有 脚本 ， 如 图 1-4 所 示 。 右 键 单 击 行 号 可 以 
设置 普通 断 点 、 条 件 断 点 ,还 可 以 让 代码 执行 到 当前 行 。 断 点 是 暂停 执行 脚本 ,然后 一 步 一 步 观 
察 执行 情况 的 有 效 方法 。 在 这 个 标签 页 的 右 侧 ， 可 以 输入 一 些 想 要 监控 的 变量 和 表达 式 ， 以 便 随 
时 观察 它们 的 值 。 






































四 日 日 Developer Tools ~ http://book.dev/3145/01/ 四 
一 
国 加 和 @j 区 局 由 园 卫 
Elements Resources Network Sources Timeline Profiles Audits Console PageSpeed 
月 01jsx jqueryjs 四 站 y | 二 + 
1 $(document).ready(function() { VWatch Expressions 二 -名 
2 S$('div.poem-stanza').addClass('highlight'); 
3}); No Watch Expressions 
& WCall Stack 
Not Paused 
VScope Variables 
Not Paused 
vBreakpoints 
No Breakpoints 
VDOM Breakpoints 
No Breakpoints 
VXHR Breakpoints + 
No Breakpoints 
kb Event Listener Breakpoints 
PWorkers 
.2a 0 LU 党 
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Console (控制 台 ) 标签 页 恐怕 是 学 习 jQuery 的 过 程 中 用 得 最 多 的 一 个 了 ， 如 图 1-5 所 示 。 可 
以 在 里 面 输入 JavaScript 语 句 ， 按 回 车 后 ， 语 句 的 执行 结果 就 会 显示 在 上 方 。 

在 这 个 例子 中 , 我 们 使 用 了 与 代码 清单 1-2 中 相同 的 选择 符 ， 但 并 未 对 选中 的 元 素 执行 操作 。 
即便 如 此 ,这 条 简单 的 语句 也 给 出 了 很 有 价值 的 信息 。 我 们 看 到 ,这 个 选择 符 的 执行 结果 是 一 个 
jQuery 对 象 ， 包 含 页 面 中 的 两 个 .poem-stanza 元 素 。 随 时 都 可 以 在 浏览 器 中 通过 这 个 控制 台 快 
速 地 试验 jQuery 代码 。 























@ee Developer Tools - http://book.dev/3145/01/ 加 
E = { g BN 1 下 
国志 © % 人 久 有 L 训 三 
Elements Resources Network Sources Timeline Profiles Audits Console PageSpeed 
> ) 3 
[Pp <div id="fred" class="poem-stanza highlight">.</div>, P<div class="poem-stanza highlight">..</div>] 
,> QQ © <topframe>y <page context> T CD | Errors Warnings Logs Debug Ee3 

















此 外 ， 还 可 以 直接 编写 与 控制 台 交 互 的 代码 ， 这 就 要 用 到 console. log() 方法 了 ， 参见 代 
码 清单 1-4。 


代码 清单 1-4 


$s(document) .ready (function() { 
console.log('hello'); 
console.1og(52) ; 
console.log($('div.poem-stanza')); 
有 


这 里 的 代码 表明 ， 可 以 向 console.1og() 方 法 中 传人 任何 表达 式 。 字 符 串 、 数 值 等 简单 的 
值 会 被 直接 打印 出 来 ， 而 jQuery 对 象 等 复杂 的 值 则 会 以 容易 理解 的 格式 展示 出 来 ， 如 图 1-6 所 示 。 


加 日 白 Developer Tools - http://book.dev/3145/01/ 








本 








= E f= 
t {= 人 vn I 
国 本 ©% 人 Om us 
Elements Resources Network Sources Timeline Profiles Audits Console PageSpeed 
hello 81.js:2 
52 81.1s:3 


v [div#fred.poem-stanza, div.poem-stanza, prevObject: jQuery.fn.jQuery.init[1], context: document, 
selector: "div.poem-stanza", constructor: function, init: function.] 

p 0: div#fred.poem-stanza 

* 1: div.poem-stanza 

* context: document 

Length: 2 
bw prevObject: jQuery.fn.jQuery.init[1] 
selector: "div.poem-stanza" 








_: 0bject[9] 
91.1s:4 
> | 
昌 , 三 Q © <topframe>v <page context> T 有) | Errors Warnings Logs Debug Ee. 








图 1-6 


这 个 console.1og() 方 法 (我 们 提 到 的 所 有 开发 人 员工 具 中 都 有 这 个 方法 ) 是 对 JavaScript 
的 alert () 函数 的 绝 好 替代 ， 在 测试 jQuery 代码 时 也 会 非常 有 用 。 





网 
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1.6 ”小结 


本 章 ， 我 们 学 习 了 怎样 设置 jQuery， 以 便 在 网 页 中 通过 JavaScript 使 用 它 ; 学 习 了 使 用 s () 工 
三 函 数 查找 具有 给 定 类 的 页 面部 分 ; 学 习 了 调用 .aqqclass () 为 页 面 的 这 些 部 分 应 用 额外 的 样 
式 ; 还 学 习 了 调用 $ (document) .ready () 基于 页 面 加 载 来 执行 代码 。 此 外 ,我 们 也 探讨 了 在 编 
写 、 测 试 和 调试 jQuery 代码 时 将 会 用 到 的 开发 工具 。 

经 过 对 本 章 的 学 习 , 我 们 对 开发 者 选择 使 用 JavaScript 框 架 , 而 不 是 从 零 开始 编写 代码 ( 即使 
是 最 基本 的 任务 ) 的 原因 有 了 一 个 概念 。 同 时 ， 也 理解 了 jQuery 作为 一 个 框架 ， 都 有 哪些 值得 称 
道 的 地 方 以 及 我 们 选择 它 而 不 是 选 别 的 框架 的 理由 。 我 们 也 大 体 上 知道 了 jQuery 能 够 简化 哪些 
任务 。 

本 章 中 给 出 的 示范 如 何 使 用 jQuery 的 简单 例子 ， 在 现实 中 并 不 是 很 有 用 。 在 下 一 章 中 , 我们 
将 在 此 基础 上 继续 探索 jQuery 中 高 级 的 选择 符 使 用 方式 ， 并 介绍 这 一 技术 的 实际 应 用 。 
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jQuery 利用 了 CSS 选 择 符 的 能 力 ， 让 我 们 能 够 在 DOM 中 快捷 而 轻松 地 获取 元 素 或 元 素 集合 。 
本 章 将 介绍 如 下 内 容 : 

口 网 页 中 元 素 的 结构 ; 

口 如 何 通过 CSS 选 择 符 在 页 面 中 查找 元 素 ; 

口 扩展 jQuery 标准 的 CSS 选 择 符 ; 

口 让 选择 页 面 元 素 更 灵活 的 DOM 遍 历 方 法 。 


2.1 理解 DOM 


jQuery 最 强大 的 特性 之 一 就 是 它 能 够 简化 在 DOM 中 选择 元 素 的 任务 .DOM( Document Object 
Model， 文 档 对 象 模型 ) 充当 了 JavaScript 与 网 页 之 间 的 接口 ; 它 以 对 象 网 络 而 非 纯 文本 的 形式 来 
表现 HTML 的 源 代码 。 

DOM 中 的 对 象 网 络 与 家 谱 有 有 几 分 类 似 。 当 我 们 提 到 网 络 中 元 素 之 间 的 关系 时 ， 会 使 用 类 似 
描述 家 庭 关 系 的 术语 ， 比 如 父 元 素 、 子 元 素 ， 等 等 。 通 过 一 个 简单 的 例子 ， 可 以 帮助 我 们 理解 文 
档 各 元 素 构成 的 树 形 结构 : 


<html> 
<head> 
<title>the title</title> 
</head> 
<body> 
<div> 




















<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<p>This is yet another paragraph.</p> 
</div> 
</body> 
</html> 


这 里 ，<html> 是 其 他 所 有 元 素 的 祖先 元 素 ， 换 句 话 说 ， 其 他 所 有 元 素 都 是 <html> 的 后 代 
元 素 。<head> 和 <body> 元 素 是 <html> 的 子 元 素 (但 并 不 是 它 唯 一 的 子 元 素 )。 因 此 除了 作为 
<head> 和 <body> 的 祖先 元 素 之 外 , <html> 也 是 它们 的 父 元 素 。 而 <p> 元 素 则 是 <aiv> 的 子 元 
素 (也 是 后 代 元 素 )， 是 <body> 和 <html> 的 后 代 元 素 ， 是 其 他 <p> 元 素 的 同辈 元 素 。 这 些 元 














图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


2.2 使 用 $0 元 数 15 





素 之 间 的 关系 从 下 面 的 图 2-1 中 可 以 看 得 更 清楚 。 



































I | 














图 2-1 


为 了 把 DOM 结 构 更 形象 地 表现 出 来 ， 可 以 使 用 很 多 工具 ， 例 如 Firefox 的 Firebug 插 件 、Safari 
和 Chrome 中 的 Web Inspector 等 。 

有 了 这 个 元 素 树 ， 就 可 以 使 用 Query 从 中 取得 任何 元 素 了 。 而 我 们 用 来 取得 元 素 的 工具 ， 就 
是 jQuery 选择 符 和 遍历 方法 。 


2.2 使 用 $() 函数 
我 们 通过 jQuery 的 各 种 选择 符 和 方法 取得 的 结果 集合 会 被 包装 在 jQuery 对 象 中 。 通 过 jQuery 


对 象 实际 地 操作 这 些 元 素 会 非常 简单 。 可 以 轻松 地 为 jQuery 对 象 绑 定 事件 、 添 加 漂亮 的 效果 ,也 
可 以 将 多 重修 改 或 效果 通过 jQuery 对 象 连 缀 到 一 起 。 



































然而 ，jQuery 对 象 与 常规 的 DOM 元 素 不同 ， 而 且 也 没有 必要 为 实现 某 些 任 
务 给 纯 DOM 元 素 或 节点 列表 添加 相同 的 方法 和 属性 。 在 本 章 的 最 后 一 部 分 中 ， 
我 们 会 介绍 如 何 直 接 访问 收集 在 jQuery 对 象 中 的 DOM 元 素 。 


为 了 创建 jQuery 对 象 ， 就 要 使 用 $ () 函数 。 这 个 函数 接受 CSS 选 择 符 作 为 参数 ， 充 当 一 个 工 
三 ,返回 包含 页 面 中 对 应 元 素 的 jQuery 对 象 。 所 有 能 在 样式 表 中 使 用 的 选择 符 都 可 以 传 给 这 个 函 
数 ， 随 后 我 们 就 可 以 对 匹配 的 元 素 集合 应 用 jQuery 方法 。 








在 jQuery 中 ,美元 符号 $ 只 不 过 标识 符 jQuery 的 “别名 ”。 由 于 $ () 在 JavaScript 
库 中 很 常见 , 所 以 , 如 果 在 一 个 页 面 中 使 用 了 几 个 这 样 的 库 , 那么 就 会 导致 冲突 。 
在 这 种 情况 下 ， 可 以 在 我 们 自 定 义 的 jQuery 代码 中 ， 通 过 将 每 个 $ 的 实例 替换 成 
jQuery 来 避免 这 种 冲突 。 第 10 章 还 会 介绍 这 个 问题 的 其 他 解决 方案 。 


| 让 jQuery 与 其 他 JavaScript 库 协同 工作 
! 
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有 3 种 基本 的 选择 符 : 标签 名 、ID 和 类 。 这 些 选 择 符 可 以 单独 使 用 ， 也 可 以 与 其 他 选择 符 组 
合 使 用 。 表 2-1 展 示 了 这 3 种 基本 的 选择 符 。 


表 2-1 基本 的 选择 符 

















选 择 符 CSS jQuery 说 明 
标签 名 P {} $('p') 取得 文档 中 所 有 的 段落 
ID #Some-id {} S$('#Ssome-id') 取得 文档 中 ID 为 some_iq 的 一 个 元 素 
类 .Some-class {} $('.some-class') 取得 文档 中 类 为 some-class 的 所 有 元 素 


第 1 章 曾 经 提 到 过 , 在 将 方法 连 绥 到 $ () 工厂 函数 后 面 时 , 包装 在 jQuery 对 和 象 中 的 元 素 会 被 自 
动 、 隐 式 地 循环 遍历 。 换 句 话说， 这 样 就 避免 了 使 用 for 循 环 之 类 的 显 式 迁 代 ( 这 种 迭代 在 DOM 
脚本 编程 中 非常 常见 )。 

在 介绍 了 基本 的 情况 之 后 ， 下 面 我 们 就 开始 探索 选择 符 的 一 些 更 强大 的 用 途 。 























2.3 CSS 选择 符 


jQuery 支持 CSS 规 范 1 到 规范 3 中 的 几乎 所 有 选择 符 , 具 体内 容 可 以 参考 W3C( World Wide Web 

四 汪汪 万 维 网 联盟 ) 网 站 http:/www.w3.org/Style/CSS/specs。 这 种 对 CSS 选 择 符 的 支持 ， 使 

得 开发 者 在 增强 自己 的 网 站 时 , 不 必 为 哪 种 浏览 絮 不 理解 某 种 不 太 常用 的 选择 符 而 担心 ,只 要 该 
浏览 器 启用 了 JavaScript 就 没有 问题 








渐进 增强 
负责 任 的 jQuery 开发 者 应 该 在 编写 自己 的 程序 时 ， 始 终 坚 持 渐进 增强 
»》 ( progressive enhancement ) 和 平稳 退化 ( graceful degradation ) 的 理念 ， 做 到 在 
JavaScript 禁 用 时 ， 页 面 仍 然 能 够 与 启用 JavaScript 时 一 样 准确 地 呈现 ， 即 使 没有 
那么 美观 。 贯 穿 本 书 ， 我 们 还 将 继续 探讨 这 些 理念 。 关 于 渐进 增强 的 更 多 信息 ， 
请 参考 : http://en.wikipedia.org/wiki/Progressive_enhancement。 


为 了 学 习 在 jQuery 中 如 何 使 用 CSS 选 择 符 ， 我 们 选择 了 一 个 很 多 网 站 中 都 会 有 的 通常 用 于 导 
航 的 结构 一 一 艇 套 的 无 序列 表 。 


<ul id="selected-plays"> 
<l1i>Comedies 
<ul> 
<l1i><a href="/asyoulikeit/">As You Like It</a></1i> 
<li>All's Well That Ends Well</1i> 
<li>A Midsummer Night's Dream</1i> 
<l1i>Twelfth Night</1i> 
</ul> 
</1i> 
<li>Tragedies 
whl 











图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


2.3 CSS 选择 符 17 





<li><a href="hamlet.pdf">Hamlet</a></1i> 
<li>Macbeth</1i> 
<li>Romeo andq Juliet</1i> 
</ul> 
办 
<l1i>Histories 
<ul> 
<li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) 
<ul> 
<l1i>Part I</1i> 
<li>Part II</1i> 
el 
<li><a href="http://www.shakespeare.co.uk/henryv.htm"> 
Henry V</a></1i> 





<l1i>Richard II</1i> 


</ul> 
</1i> 
</ul> 
下 载 代 码 示例 
AN 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 广 


Q 档 的 一 个 片段 。 如 果 读者 想 试 一 试 这 些 示 例 ， 可 以 从 以 下 地 址 下 载 完 整 的 示例 代 
码 : Packt Publishing 网 站 http://www.packtpub.com/support， 或 者 本 书 网 站 http://book. 
learningjquery.com/。 


我 们 注意 到 ， 其 中 第 一 个 <ul> 的 人 D 值 为 selected-plays，, 但 <1i> 标 签 则 全 都 没有 与 之 关 
联 的 类 。 在 没有 应 用 任何 样式 的 情况 下 ， 这 个 列表 的 外 观 如 图 2-2 所 示 。 





Selected Shakespeare Plays 


es Comedies 
© As You Like It 
© All's Well That Ends Well 
© AMidsummer Night's Dream 
© Twelfth Night 
es Tragedies 
© Hamlet 
© Macbeth 
© Romeo and Juliet 
es Histories 
© Henry IV (email) 
m Partl 
m Part II 
© Henry V 
© Richard II 














图 2-2 
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一 组 带 符号 的 列表 项 垂直 排列 ， 并 且 每 个 





图 2-2 中 的 舱 套 列表 按照 我 们 期 望 的 方式 显示 
列表 都 按照 各 自 的 级 别 进 行 了 缩 进 。 


基于 列表 项 的 级 别 添加 样式 


假设 我 们 想 让 顶级 的 项 ( Comedies 、Tragedies 和 Histories )， 而 且 只 有 顶级 的 项 水 平 排列 ， 那 
么 可 以 先 在 样式 表 中 定义 一 个 horizontal 类 : 


.horizontal { 
float: left; 
list-style: none; 
margin: 10px; 


} 

这 个 horizontal 类 会 将 元 素 浮动 到 它 后 面 元 素 的 左 侧 ， 如 果 这 个 元 素 是 一 个 列表 项 ， 那 么 
会 移 除 其 项 目 符号 ， 最 后 再 为 该 元 素 的 每 一 边 各 添加 10 像 素 的 外 边 距 。 

这 里 ， 我 们 没有 直接 在 HTML 中 添加 horizontal 类 ， 而 只 是 将 它 动 态 地 添加 给 位 于 顶级 的 
列表 项 Comedies 、Tragedies 和 Histories， 以 便 示 范 jQuery 中 选择 符 的 用 法 ， 如 代码 清单 2-1 所 示 。 


代码 清单 2-1 


$s(document) .ready (function() { 
$('#selected-plays > 1i').addClass('horizontal'); 
小 六 这 


我 们 在 第 1 章 讨论 过 ， 当 在 jQuery 代码 中 使 用 $ (document) .ready () 时 , 位 于 其 中 的 所 有 代 
码 都 会 在 DOM 加 载 后 立即 执行 。 

第 2 行 代 码 使 用 子 元 素 组 合 符 ( > ) 将 horizontal 类 只 添加 到 位 于 顶级 的 项 中 。 实 际 上 ， 位 
于 $ () 函数 中 的 选择 符 的 含义 是 ， 查 找 ID 为 selectedq-plays 的 元 素 (#selected-plays ) 的 
子 元 素 ( > ) 中 所 有 的 列表 项 (11 )。 

随 着 这 个 类 的 应 用 ， 列 表 项 应 该 水 平 对 齐 ， 而 不 是 垂直 对 齐 ， 如 图 2-3 所 示 。 






























































Selected Shakespeare Plays 





Comedies Tragedies Histories 
© As You Like It © Hamlet © Henry IV (email) 
© All's Well That Ends Well © Macbeth m PartI 
© AMidsummer Night's Dream © Romeo and Juliet m Part Il 
© Twelfth Night © Henry V 
Richard II 








图 2-3 





要 为 其 他 项 ( 非 顶 级 的 项 ) 添加 样式 , 有 很 多 种 方式 。 因 为 已 经 为 顶级 项 添加 了 horizontal 
类 ， 所 以 取得 全 部 非 顶 级 项 的 一 种 方式 ， 就 是 使 用 否定 式 伪 类 选择 符 来 识别 没有 horizontal 类 
的 所 有 列表 项 。 注 意 代码 清单 2-2 添 加 的 第 3 行 代码 。 
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代码 清单 2-2 


s(dqocument) .ready (function() { 
$s('#selected-plays > 1i').addClass('horizontal'); 


$('#selected-plays li:not(.horizontal)') .addClass('sub-level'); 
二 


这 一 次 取得 的 每 个 列表 项 ( <1i> ): 
口 是 ID 为 selectedq-plays 的 元 素 (#selected-plays ) 的 后 代 元 素 。 
口 没有 horizontal 类 ( :not(.horizontal) )。 
在 为 这 些 列表 项 添加 了 sub-level 类 之 后 ， 它 们 的 背景 颜色 变 为 在 样式 表 规 则 中 定义 的 浅 
灰色 。 


.Sub-level { 
background: #ccc; 


} 
此 时 的 般 套 列表 如 图 2-4 所 示 。 





























Selected Shakespeare Plays 
Comedies Tragedies Histories 
© As You LikeIt ° Hamlet 5 Henry IV (email) 
© All's Well That Ends Well ©° Macbeth m PartI 
© AMidsummer Night's Dream © Romeo and Juliet m PartIl 
© Twelfth Night oO Hen 
oo Richard 了 
图 2-4 
2.4 属性 选择 符 
属性 选择 符 是 CSS 选 择 符 中 特别 有 用 的 一 类 选择 符 。 顾 名 思 义 ， 属 性 选择 符 通 过 HTML 元 素 





的 属性 选择 元 素 ， 例如 链接 的 tit1e 属 性 或 图 像 的 a1t 属 性 . 例如 ， 要 选择 融 有 alt 属 性 的 所 有 
图 像 元 素 ， 可 以 使 用 以 下 代码 : 


$('img[lalt]') 














为 链接 添 加 样式 

属性 选择 符 使 用 一 种 从 正则 表达 式 中 借鉴 来 的 通配符 语法 , 以 ^ 表 示 值 在 字符 串 的 开始 , 以 $ 
表示 值 在 字符 串 的 结尾 。 而 且 ， 也 是 用 星 号 * 表 示 要 匹配 的 值 可 以 出 现在 字符 串 中 的 任意 位 置 ， 
用 叹 号 ! 表 示 对 值 取 反 。 

假设 我 们 想 以 不 同 的 文本 颜色 来 显示 不 同类 型 的 链接 ， 那 么 首先 要 在 样式 表 中 定义 如 下 
样式 : 
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color: #00c; 


a.mailto { 
background: url(images/email.png) no-repeat right top; 
padding-right: 18px; 


a.pdflink { 
background: url(images/pdf.png) no-repeat right top; 
padding-right: 18px; 


a.henrylink { 
background-color: #fff; 
padding: 2px; 
border: lpx solid #000; 
} 


然后 ， 可 以 使 用 jQuery 为 符合 条 件 的 链接 添加 3 个 类 : mailto、 pdflink 和 henrylink。 
要 为 所 有 电子 邮件 链接 添加 类 ,需要 构造 一 个 选择 符 , 用 来 寻找 所 有 带 href 属 性 ( [href] ) 
有 目 以 mailto 开 头 (^="mailto:"] ) 的 锚 元 素 (a )。 结 果 如 代码 清单 2-3 所 示 。 


代码 清单 2-3 


s(dqocument) .ready (function() { 
$s('a[lhref^="mailto:"]').addClass('mailto'); 
有 


因为 我 们 在 页 面 的 样式 表 中 定义 了 相应 的 规则 , 所 以 页 面 中 所 有 mailto :链接 的 后 面 都 会 出 
现 一 个 信封 图 标 ， 如 图 2-5 所 示 。 























Selected Shakespeare Plays 
Comedies Tragedies Histories 

© AsYou Like 站 ° Hamlet o Henry 1V (emaill 了 ) 
o Alls Well That Ends Well o Macbeth =m PartI 

© AMidsummer Night's Dream o Romeo and Juliet sm PartIl 

© Twelfth Night oo Henry V 

oo Richard II 
图 2-5 








要 为 所 有 指向 PDF 文 件 的 链接 添加 类 ， 需 要 使 用 美元 符号 ($ ) 而 不 是 脱 字 符号 (^)。 这 是 
为 我 们 要 选择 所 有 href 属 性 以 .paf 结 尾 的 链接 ， 如 代码 清单 2-4 所 示 。 





代码 清单 2-4 
$s(document) .ready (function() { 
$s('a[lhref^="mailto:"]').addClass('mailto'); 


$s('a[lhref$=".pdf"]').addClass('pdflink'); 
3 
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为 有 已 经 定义 的 样式 表 规 则 ， 新 添加 的 paflink 类 也 会 导致 每 个 PDF 文档 链接 后 面 出 现 
Adobe Acrobat 图 标 ， 如 图 2-6 所 示 。 

















Selected Shakespeare Plays 二 
Comedies Tragedies 要 Histories 

o As You Like It o 上 而 本 人 o HenryIV (email )) 

© All's Well That Ends Well © Macbeth m PartI 

o AMidsummer Night's Dream o Romeo and Juliet um PartIl 

oO_ Twelfth Night o HenryV 

Oo Richard II 
2-6 





属性 选择 符 也 可 以 组 合 使 用 。 例 如 ， 可 以 为 href 属 性 即 以 http 开 头 量 任意 位 置 包含 henry 
的 所 有 链接 添加 一 个 henrylink 类 ， 如 代码 清单 2-5 所 示 。 


代码 清单 2-5 





$s (document) .ready (function() { 
$s('a[lhref^="mailto:"]').addClass('mailto'); 
s('a[lhref$=".pdf"]').addClass('pdflink'); 
s('a[lhref^="http"] [href*="henry"]') 

.addClass('henrylink'); 

}) 3 

区 二 


在 把 这 3 个 类 应 用 到 3 种 类 型 的 链接 之 后 ， 应 该 看 到 如 图 2-7 所 示 的 结 














Selected Shakespeare Plays 
Comedies Tragedies A Histories 

O As You Like it oO Hamlet 人 | © Henry IV (emaill ]) 
o All's Well That Ends Well © Macbeth sm PartI 

© AMidsummer Nights Dream o Romeo and Juliet m Part II 

© Twelfth Night o Henry V 

oo Richard II 
2-7 








我 们 注意 到 , 在 这 个 屏幕 截图 中 ，Hamlet 链 接 右 侧 有 一 个 PDF 图 标 ，email 链 接 旁 边 有 一 个 信 
封 图 标 ， 而 Henry V 链 接 则 带 有 白色 背景 和 黑色 边框 。 








2.5” 自 定义 选择 符 


除了 各 种 CSS 选 择 符 之 外 ,jQuery 还 添加 了 独 有 的 完全 不 同 的 自 定 义 选择 符 。 这 些 自 定 义 选 
择 符 进一步 增强 了 已 经 十 分 强大 的 CSS 选 择 符 ， 为 我 们 提供 了 在 页 面 上 选择 元 素 的 新 手段 。 
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性 能 提示 
痢 只 要 可 能 ,jQuery 就 会 使 用 浏览 器 原生 的 DOM 选 择 符 引擎 去 查找 元 素 。 但 在 
使 用 自 定 义 选择 符 的 时 候 ， 就 无 法 使 用 速度 最 快 的 原生 方法 了 。 因 此 ， 建 议 读者 


在 能 够 使 用 原生 方法 的 情况 下 ， 就 不 要 频繁 地 使 用 自 定义 选择 符 ， 以 确保 性 能 。 


jQuery 中 的 多 数 自 定义 选择 符 都 可 以 让 我 们 从 已 经 找到 的 元 素 中 选 出 一 或 多 个 元 素 。 自 定义 
选择 符 通 稼 跟 在 一 个 CSS 选 择 符 后 面 ， 基 于 已 经 选择 的 元 素 集 的 位 置 来 查找 元 素 。 自 定义 选择 符 
的 语法 与 CSS 中 的 伪 类 选择 符 语 法 相同 ， 即 选择 符 以 冒号 〈( : ) 开头 。 例 如 ， 我 们 想 要 从 带 有 
horizontal 类 的 <aiv> 集 合 中 选择 第 ?2 项， 那么 应 该 使 用 下 面 的 代码 : 

$s('div.horizontal:eq(1)') 

注意 ,因为 JavaScript 数 组 采用 从 0 开始 的 编号 方式 ,所 以 eq (1) 取 得 的 是 集合 中 的 第 2 个 元 素 。 
而 CSS 则 是 从 1 开始 的 ， 因 此 CSS 选 择 符 $ ('div:nth-chilg(1) ') 取 得 的 是 作为 其 父 元 素 第 1 个 
子 元 素 的 所 有 div 元 素 。 如 果 记 不 清 哪个 从 0 开始 ， 哪 个 从 1 开始 ， 可 以 参考 jQuery API 文 档 : 
http://api.jquery.com/category/selectors/。 


2.5.1 每 隔 一 行为 表格 添加 样式 


jQuery 库 中 的 两 个 十 分 有 用 的 自 定 义 选 择 符 是 :oduda 和 :even。 下 面 ,我们 就 来 看 一 看 如 何 通 
过 这 两 个 选择 符 为 表格 添加 基本 的 条 纹样 式 ， 针 对 下 面 的 表格 : 


<h2>Shakespeare's Plays</h2> 
<table> 

<*> 
<td>As You Like It</td> 
<td>Comedy</td> 
<td></td> 

< 

< 
<td>All's Well that Ends Well</td> 
<td>Comedy</td> 
<td>1601</td> 

</ EE 

< 
<td>Hamlet</td> 
<td>Tragedy</td> 
<td>1604</td> 

/上 这 

< 
<td>Macbeth</td> 
<td>Tragedy</td> 
<td>1606</td> 

</tr> 

< 
<td>Romeo and Juliet</td> 
<td>Tragedy</td> 
<td>1595</td> 





























网 
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/区 
惑 七 下 加 
<td>Henry IV, Part I</td> 
<td>History</td> 
<td>1596</td> 
</tr> 
*tF> 
<td>Henry V< /td> 
<tdq>HiSstory< /td> 
<td>1599</td> 
</tr> 
</table> 
<h2>Shakespeare's Sonnets</h2> 
<table> 
演 二 下 尖 
<td>The Fair Youth</td> 
<td>1-126</td> 
</tr> 








<td>The Dark Lady</td> 
<td>127-152</td> 





<td>The Rival Poet</td> 
<td>78-86</td> 
/tr 
</table> 


在 样式 表 中 添加 一 点 样式 , 表格 的 表 头 和 单元 格 就 清晰 了 许多 。 现在, 这 个 表格 有 白色 的 背 
景 ， 但 行 与 行 之 间 没 有 区 别 ， 如 图 2-8 所 示 。 














Shakespeare's Plays 


As YOU Like It Comedy 

All's Well that Ends Well Comedy 1601 
Hamlet Tragedy 1604 
Macbeth Tragedy 1606 
Romeo and Juliet Tragedy 1595 
Henry IV, Part I History 1596 
Henry V History 1599 


Shakespeare's Sonnets 


The Fair Youth 1-126 
The Dark Lady 127-152 
The Rival Poet 78-86 











2-8 
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可 以 在 样式 表 中 为 所 有 表格 行 添 加 一 种 样式 ， 然 后 再 为 奇数 行 定义 一 个 alt 类 。 


下 和 全 

background-color: #fff; 
} 
本 

background-color: #ccc; 


} 
最 后 编写 jQuery 代码 ， 将 这 个 类 添加 到 表格 中 的 奇数 行 (<tr> 标 签 )， 如 代码 清单 2-6 所 示 。 


代码 清单 2-6 


$s(document) .ready (function() { 
$('tr:even') .addClass('alt'); 
站 站 


等 一 等 ! 为 什么 针对 奇数 行使 用 :even 选 择 符 呢 ?很 简单 ，: eq () 选择 符 、:odd 和 :even 选 
择 符 都 使 用 JavaScript 内 置 从 0 开始 的 编号 方式 ， 因 此 ， 第 一 行 的 编号 为 0 ( 偶数 )， 第 二 行 的 编号 
为 1 (奇数 )， 依 此 类 推 。 知 道 这 一 点 之 后 ， 我 们 希望 上 面 那 几 行 代码 能 够 生成 如 图 2-9 所 示 的 


轩 
结果 O 











Shakespeare's Plays 


As You Like It Comedy 

All's Well that Ends Well Comedy 1601 
Hamlet Tragedy 1604 
Macbeth Tragedy 1606 
Romeo and Juliet Tragedy 1595 
Henry IV, Part I History 1596 
Henry V History 1599 


Shakespeare's Sonnets 


The Fair Youth 1-126 
The Dark Lady 127-152 
The Rival Poet 78-86 














图 2-9 


不 过 , 要 注意 的 是 ,如 果 一 个 页 面 上 存在 另外 一 个 表格 , 我 们 则 真有 可 能 会 看 到 意料 之 外 的 
结果 。 例 如 ， 因 为 Plays 表 格 中 的 最 后 一 行为 “ 另 一 种 ” 浅 灰色 背景 ， 所 以 Sonnets 表 格 的 第 一 行 
的 背景 就 会 为 白色 。 解 决 这 个 问题 的 一 种 方法 是 使 用 :nth-childa() 选 择 符 。 这 个 选择 符 相 对 于 
元 素 的 父 元 素 而 非 当 前 选择 的 所 有 元 素来 计算 位 置 ， 它 可 以 接受 数值 、odqa 或 even 作 为 参数 ， 如 
代码 清单 2-7 所 示 。 
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代码 清单 2-7 


s(dqocument) .ready (function() { 
$s('tr:nth-child(odd)') .addCclass('alt'); 
}33 


值得 一 提 的 是 ，:nth-child() 是 jQuery 中 唯一 从 1 开始 计数 的 选择 符 。 要 实现 与 图 2-8 所 示 
相同 的 条 纹 交 蔡 效 果 ， 并 且 确 保 同 一 文档 中 的 多 个 表格 的 效果 一 致 ， 需 要 使 用 oad 而 不 是 even 
参数 。 替 换 了 参数 之 后 ， 两 个 表格 出 现 了 一 致 的 条 纹 交 蔡 效 果 ， 如 图 2-10 所 示 。 




















Shakespeare's Plays 


As YOU Like It Comedy 

All's Well that Ends Well Comedy 1601 
Hamlet Tragedy 1604 
Macbeth Tragedy 1606 
Romeo and Juliet Tragedy 1595 
Henry IV, Part I History 1596 
Henry V History 1599 


Shakespeare's Sonnets 


The Fair Youth 1-126 
The Dark Lady 127-152 
The Rival Poet 78-86 














图 2-10 


2.5.2 ”基于 上 下 文 内 容 选 择 元 素 


下 面 , 我 们 介绍 最 后 一 个 自 定义 选择 符 。 假设 出 于 某 种 原因 ,我 们 希望 突出 显示 提 到 任何 一 
种 Henry 游 戏 的 所 有 表格 单元 。 为 此 ， 我 们 所 要 做 的 就 是 在 样式 表 中 添加 一 个 声明 了 粗 体 和 和 斜体 
文本 的 类 ( .highlight {font-weight:bold; font-style:italic; } )， 然 后 向 jQuery 代 
人 码 中 添加 一 行 代码 ， 其 中 使 用 的 是 :contains () 选择 符 ， 参见 代 码 清 单 2-8。 


代码 清单 2-8 


$s (document) .ready (function() { 
$s('tr:nth-child(odd)') .addCclass('alt'); 
$s('td:contains (Henry)') .addClass('highlight'); 
用。 


这 样 ， 在 可 爱 的 条 纹 表格 中 ， 就 能 够 看 到 突出 显示 的 Henry 游 戏 了 ， 如 图 2-11 所 示 。 
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Shakespeare's Plays 


As You Like It Comedy 

All's Well that Ends Well Comedy 1601 
Hamlet Tragedy 1604 
Macbeth Tragedy 1606 
Romeo and Juliet Tragedy 1595 
Henry IV, Part I History 1596 
Henry V History 1599 


Shakespeare's Sonnets 


The Fair Youth 1-126 
The Dark Lady 127-152 
The Rival Poet 78-86 











图 2-11 
必须 注意 ,，: contains () 选择 符 区 分 大 小 写 。 换 和 名 话说 , 使 用 不 带 大 写 “H” 
~> 的 S$('td:contains (henry)')， 不 会 选择 任何 单元 格 。 


诚然 ,不 使 用 Query (或 任何 客户 端 编程 语言 ) 也 可 以 通过 其 他 方式 实现 这 种 行 条 纹 和 突出 
显示 效果 。 然 而 ， 在 内 容 由 程序 动态 生成 ， 而 我 们 又 无 权 改 动 HTML 和 服务 器 端 代 码 的 情况 下 ， 
jQuery 加 上 CSS 对 这 种 样式 化 操作 提供 了 优秀 的 替换 方案 。 


2.5.3 ”基于 表单 的 选择 符 


自 定 义 选 择 符 并 不 局 限于 基于 元 素 的 位 置 选择 元 素 。 比 如 ， 在 操作 表单 时 ，jQuery 的 自 定 义 
选择 符 以 及 后 来 补充 的 CSS3 选 择 符 同样 可 以 简化 选择 元 素 的 任务 。 表 2-2 列 出 了 其 中 一 些 适用 于 
表单 的 选择 符 。 











表 2-2 ”表单 选择 符 















































选 择 符 匹 配 

:input 输入 字段 、 文 本 区 、 选 择 列 表 和 按钮 元 素 
:button 按钮 元 素 或 type 属 性 值 为 button 的 输入 元 素 
:enabled 由 用 的 表单 元 素 

:disabled 禁用 的 表单 元 素 

:checked 勾 选 的 单 选 按钮 或 复 选 杠 

:selected 选择 的 选项 元 素 
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与 其 他 选择 符 类 似 ， 组 合 使 用 表单 选择 符 可 以 更 有 针对 性 。 例 如 ， 使 用 $('input [type= 
"radio"] :checked' ) 可 以 选择 所 有 选中 的 单 选 按钮 ( 而 不 是 复 选 框 ), 而 使 用 $ (' input [type= 
"password"],input[type="text"] :disabled') 则 可 以 选择 所 有 密码 输入 字段 和 禁用 的 文本 
输入 字段 。 可 见 , 即便 是 使 用 自 定义 选择 符 , 也 可 以 按照 基本 的 CSS 语 法 来 定义 匹配 的 元 素 列 表 。 














[ 以 上 只 是 对 选择 符 表达 式 的 简单 介绍 ， 第 9 章 还 将 进一步 讨论 选择 符 。 | 


2.6 DOM 遍历 方法 


利用 前 面 介绍 的 jQuery 选择 符 取 得 一 组 元 素 , 就 像 是 我 们 在 DOM 树 中 纵横 遍历 再 经 过 筛选 得 
到 的 结果 一 样 。 如 果 只 有 这 一 种 取得 元 素 的 方式 , 那 我 们 选择 的 余地 从 某 个 角度 讲 也 是 很 有 限 的 。 
很 多 情况 下 , 取得 某 个 元 素 的 父 元 素 或 者 祖先 元 素 都 是 基本 的 操作 , 而 这 正 是 jQuery 的 DOM 遍 历 
方法 的 用 武之 地 。 有 了 这 些 方法 ， 我 们 可 以 轻而易举 地 在 DOM 树 中 上 下 左右 地 自由 漫步 。 

其 中 一 些 方法 与 选择 符 表达 式 有 异曲同工 之 妙 。 例 如 ， 这 行 用 于 添加 alt 类 的 代码 $ (' tr: 
even') .adqclass('alt');， 可 以 通过 .filter() 方 法 重 写成 下 面 这 样 : 

$('tr').filter(':even') .addClass('alt'); 

而 且 , 这 两 种 取得 元 素 的 方式 在 很 大 程度 上 可 以 互补 。 同样 ,，. filter () 的 功能 也 十 分 强大 ， 
因为 它 可 以 接受 函数 参数 。 通 过 传人 的 函数 ， 可 以 执行 复杂 的 测试 ,以 决定 相应 元 素 是 否 应 该 保 
留 在 匹配 的 集合 中 。 例 如 ， 假 设 我 们 要 为 所 有 外 部 链接 添加 一 个 类 。 


a.external { 
background: #fff url (images/external.png) no-repeat 100% 2px; 
padding-right: 16px; 

} 


jQuery 中 没有 针对 这 种 需求 的 选择 符 。 如 果 没 有 筛选 函数 ， 就 必须 显 式 地 遍历 每 个 元 素 ， 对 
它们 单独 进行 测试 。 但 是 ， 有 了 下 面 的 筛选 函数 ， 就 仍然 可 以 利用 jQuery 的 隐 式 迭代 能 力 ， 保 持 
代码 的 简洁 ， 如 代码 清单 2-9 所 示 。 


代码 清单 2-9 
$s('a').filter(function() { 


return this.hostname && this.hostname != location.hostname; 
}).addClass('external'); 


第 二 行 代码 可 以 筛选 出 符合 下 面 两 个 条 件 的 <a> 元 素 。 

口 必须 包含 一 个 带 有 域名 ( this .hostname ) 的 hreft 属 性 。 这 个 测试 可 以 排除 mailto 及 

类 似 链接 。 

口 链接 指向 的 域名 ( 还 是 this.hostname ) 必须 不 等 于 (!= ) 页 面 当 前 所 在 域 的 名 称 
(location.hostname )。 


更 准确 地 说 ，. filter () 方 法 会 迭代 所 有 匹配 的 元 素 , 对 每 个 元 素 都 调用 传人 的 函数 并 测试 
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函数 的 返回 值 。 如 果 函 数 返回 false， 则 从 匹配 集合 中 删除 相应 元 素 ; 如 果 返 回 true， 则 保留 
应 元 素 。 
有 了 这 些 代码 ，Henry V 就 被 标记 为 外 链 了 ， 如 图 2-12 所 示 。 

















Selected Shakespeare Plays 
Comedies Tragedies A Histories 

© AsYou Like 1It o lHamlet, 人 | o Henry IV (email 小 
© All's Well That Ends Well © Macbeth m PartI 

o AMidsummer Night's Dream oO Romeo and Juliet m Part IT 

o Twelfth Night o |Henryv 7 

oo Richard 1 
图 2-12 


下 面 ， 我 们 再 通过 前 面 添 加 了 条 纹 效果 的 表格 ， 来 演示 一 些 遍历 方法 的 其 他 用 途 。 


2.6.1 为 特定 单元 格 添加 样式 


此 前 ， 我 们 已 经 为 所 有 包含 文本 Henry 的 单元 格 添加 了 highlight 类 。 如 果 想 改 为 给 每 个 包 
含 Henry 的 单元 格 的 下 一 个 单元 格 添加 样式 ， 可 以 将 已 经 编写 好 的 选择 符 作为 起 点 ， 人 然后 连 级 一 
个 .next () 方 法 即 可 ,参见 代码 清单 2-10。 


代码 清单 2-10 


$s (document) .ready (function() { 
$s('td:contains (Henry) ') .next() .addClass('highlight'); 
这 


表格 现在 的 效果 如 图 2-13 所 示 。 





Shakespeare's Plays 


As YOU Like It Comedy 

All's Well that Ends Well Comedy 1601 
Hamlet Tragedy 1604 
Macbeth Tragedy 1606 
Romeo and Juliet Tragedy 1595 
Henry IV, Part I History 1596 
Henry V History 1599 


Shakespeare's Sonnets 


The Fair Youth 1-126 
The Dark Lady 127-152 
The Rival Poet 78-86 











图 2-13 
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.next () 方 法 只 选择 下 一 个 最 接近 的 同辈 元 素 。 要 想 突出 显示 Henry 所 在 单元 格 后 面 的 全 部 
单元 格 ， 可 以 使 用 .nextall () 方 法 ， 如 代码 清单 2-11 所 示 。 


代码 清单 2-11 
s(dqocument) .ready (function() { 


$s('td:contains (Henry) ') .nextAll() .addClass ('highlight'); 
})3 


因为 包含 Henry 的 单元 格 位 于 表格 的 第 一 列 ， 因 此 以 上 代码 会 导致 相应 行 中 的 其 他 单元 格 突 
出 显示 ， 如 图 2-14 所 示 。 





Shakespeare's Plays 


As You Like 1t Comedy 

All's Well that Ends Well Comedy 1601 
Hamlet Tragedy 1604 
Macbeth Tragedy 1606 
Romeo and Juliet edy 1595 






enry IV, Part I History 1 
V 


Shakespeare's Sonnets 


The Fair Youth 1-126 
The Dark Lady 127-152 
The Rival Poet 78-86 














图 2-14 


有 读者 可 能 已 经 猪 到 了 ，.next () 和 .nextAll() 方 法 分 别 有 一 个 对 应 方法 ， 即 .prev () 
和 .prevAl1()。 此 外 ，. siblings () 能 够 选择 处 于 相同 DOM 层 次 的 所 有 其 他 元 素 ， 无 论 这 些 
元 素 处 于 当前 元 素 之 前 还 是 之 后 。 

要 在 这 些 单元 格 中 再 包含 原来 的 单元 格 ( 即 包含 Henry 的 那个 单元 格 ), 可 以 添加 .adgBack () 
方法 ， 参 见 代码 清单 2-12。 
代码 清单 2-12 


$s(document) .ready (function() { 
$s('td:contains (Henry) ') .nextAll () .addBack () 
.addClass ('highlight'); 
用 
作 了 这 个 修改 之 后 ， 相 应 行 中 的 所 有 单元 格 就 都 会 应 用 high1ight 类 的 样式 了 ， 如 图 2-15 
所 示 。 


图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 











Shakespeare's Plays 


As You Like I1t Comedy 

All's Well that Ends Well Comedy 1601 
Hamlet Tragedy 1604 
Macbeth Tragedy 1606 
Romeo and Juliet Tragedy 1595 
Henry IV, Part I History 1596 
Henry V History 1599 


Shakespeare's Sonnets 


The Fair Youth 1-126 
The Dark Lady 127-152 
The Rival Poet 78-86 








图 2-15 


事实 上 , 要 选择 同一 组 元 素 , 可 以 采用 的 选择 符 和 遍历 方法 的 组 合 很 多 。 例如 , 代码 清单 2-13 
就 是 选择 所 有 包含 Henry 的 单元 格 所 在 行 的 男 一 种 方式 。 


代码 清单 2-13 


$s(document) .ready (function() { 
$s('td:contains (Henry) ') .parent () .children() 
.addClass ('highlight'); 

3 


这 种 组 合 方式 没有 遍历 同辈 元 素 ， 而 是 通过 .parent () 方 法 在 DOM 中 上 漳 一 层 到 达 <tr>， 
然后 再 通过 .children () 选择 该 行 的 所 有 单元 格 。 























2.6.2 ” 连 绥 

刚刚 介绍 的 遍历 方法 组 合 展 示 了 jQuery 的 连 缀 能 力 。 在 jQuery 中 ， 可 以 通过 一 行 代 码 取得 多 
个 元 素 集合 并 对 这 些 元 素 集 合 执行 多 次 操作 。jQuery 的 这 种 连 绥 能 力 不 仅 有 助 于 保持 代码 简洁 ， 
而 且 在 奉 代 组 合 重新 指定 选择 符 时 ， 还 有 助 于 提升 脚本 性 能 。 








A 方法 连 缀 的 原理 
几乎 所 有 jQuery 方法 都 会 返回 一 个 jQuery 对 象 ， 因 而 可 连 组 调用 多 个 jQuery 
方法 。 第 8 章 还 会 详细 讨论 连 级 的 原理 。 


在 使 用 连 级 时 ,为 照顾 到 代码 的 可 读 性 ,还 可 以 把 一 行 代码 分 散 到 几 行 来 写 。 例如, 一 组 连 
级 的 方法 可 以 写成 3 行 ， 参见 代码 清单 2-14。 
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代码 清单 2-14 
$('td:contains (Henry) ') .parent () .find('td:eq(1)') 


.addClass('highlight') .end() .find('td:eq(2)') 
.addClass('highlight'); 


甚至 ， 也 可 以 写成 7 行 ， 参 见 代码 清单 2-15。 





代码 清单 2-15 


$('td:contains (Henry)') // 取 得 包含 Henry 的 所 有 单元 格 
.patent () // 取 得 它 的 父 元 素 
.find('td:eq(1)') // 在 父 元 素 中 查找 第 2 个 单元 格 
.addClass ('highlight') // 为 该 单元 格 添加 hightlight 类 
.end() /1/ 恢 复 到 包含 Henry 的 单元 格 的 父 元 素 
.find('td:eq(2)') // 在 父 元 素 中 查找 第 3 个 单元 格 
-adqaqClass('highlight'); // 为 该 单元 格 添加 hightlight 类 


不 可 否认 ， 这 个 例子 中 展示 的 迁 回 曲折 的 DOM 遍 历 过程 几 近 荒 廖 。 我 们 当然 不 建议 读者 使 
用 如 此 复杂 的 连 缀 方式 ,因为 还 有 更 简单 、 更 直接 的 方法 。 这 个 例子 的 用 意 只 是 演示 一 下 连 缀 为 
我 们 带 来 的 极 大 灵活 性 。 
连 级 就 像 是 一 口气 说 出 一 大 上 段 话 一 一 虽然 效率 很 高 , 但 对 别人 来 说 可 能 会 难于 理解 。 而 将 它 
分 开放 到 多 行 并 添加 明确 的 注释 ， 从 长 远 来 看 则 可 以 节省 更 多 的 时 间 。 
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所 有 选择 符 表达 式 和 多 数 jQuery 方法 都 返回 一 个 jQuery 对 象 ， 而 这 通常 都 是 我 们 所 希望 的 ， 
因为 jQuery 对 象 能 够 提供 隐 式 迭代 和 连 缀 能 力 。 

尽管 如 此 ， 我 们 仍然 有 可 能 需要 在 代码 中 直接 访问 DOM 元 素 。 例 如 ， 可 能 需要 为 另 一 个 
JavaScript 库 提供 一 组 元 素 的 结果 集合 。 或 者 可 能 不 得 不 访问 某 个 元 素 的 标签 名 一 一 通过 DOM 元 
素 的 属性 。 对 于 这 些 少 见 但 合理 的 情形 ,jQuery 提供 了 .get () 方 法 。 要 访问 jQuery 对 象 引 用 的 第 
一 个 DOM 元 素 ， 可 以 使 用 .get (0)。 因 而 ， 如 果 想 知道 带 有 id="my-element "属性 的 元 素 的 标 
签名 ， 应 该 使 用 如 下 代码 : 


var myTag = $('#my-element') .get (0) .tagName; 


为 了 进一步 简化 这 ee 为 .get () 方 法 提供 了 一 种 简写 方式 。 比 如 ， 可 以 将 


$s ('#my-element').get(0) 简 写 为 : 
































var myTag = $('#my-element') [0] .tagName; 


也 就 是 说 ， 可 以 在 选择 符 后 面 直接 使 用 方 插 号 。 显 然 ， 这 种 语法 与 访问 DOM 元 素数 组 很 相 
似 ， 而 使 用 方 括号 就 好 像 剥 掉 jQuery 的 包装 并 直接 露出 节点 列表 ， 而 方 括号 中 的 索引 ( 这 里 的 0 ) 
则 相当 于 从 中 取出 了 原本 的 DOM 元 素 。 
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2.8 小 结 


通过 本 章 介 绍 的 技术 , 读者 应 该 掌握 了 如 何 使 用 CSS 选 择 符 以 不 同方 式 在 页 面 中 选择 元 素 集 
合 , 以 及 为 租 套 列表 中 的 顶级 和 非 顶 级 项 分 别 添加 样式 , 如 何 使 用 属性 选择 符 为 不 同类 型 的 链接 
应 用 不 同 的 样式 ， 如 何 使 用 自 定义 的 jQuery 选择 符 :odd 和 :even， 或 高 级 的 CSS 选 择 
符 :nth-chilg() 为 表格 添加 条 纹 效 果 ， 以 及 如 何 使 用 连 缀 的 jQuery 方法 突出 显示 某 个 表格 单元 
中 的 文本 。 

到 现在 为 止 , 我 们 使 用 了 $ (document) .ready () 事 件 为 一 组 匹配 的 元 素 添加 类 。 在 下 一 章 
中 ， 我 们 将 探索 基于 用 户 发 起 的 事件 来 添加 类 的 技术 。 


























延伸 阅读 


要 了 解 有 关 选 择 符 与 遍历 方法 的 完整 介绍 ， 请 参考 第 9 章 或 本 书 附录 C， 也 可 以 参考 jQuery 
官方 文档 : http://api.jquery.com/。 





2.9 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 

“挑战 ”练习 有 一 些 难 度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : http://api. 
jquery.comy/。 

(1) 给 位 于 构 套 列表 第 二 个 层次 的 所 有 <1i> 元 素 添加 special 类 ; 

(2) 给 位 于 表格 第 三 列 的 所 有 单元 格 添加 year 类 ; 

(3) 为 表格 中 包含 文本 Tragedy 的 第 一 行 添加 special 类 ; 

(4) 挑战 : 选择 包含 链接 ( <a> ) 的 所 有 列表 项 ( <1i> 元 素 )， 为 每 个 选中 的 列表 项 的 同辈 列 

表 项 元 素 添加 afterlink 类 ; 
(5) 挑战 .为 与 .paf 链 接 最 接近 的 祖先 元 素 <ul> 添 加 tragedy 类 。 
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事 件 








JavaScript 内 置 了 一 些 对 用 户 的 交互 和 其 他 事件 给 予 响 应 的 方式 ,为 了 使 页 面具 有 动态 性 和 响 
应 性 ， 就 需要 利用 这 种 能 力 ， 以 便 能 够 适时 地 应 用 我 们 学 过 的 jQuery 技术 和 本 书后 面 讨论 的 一 些 
技巧 ,虽然 使 用 普通 的 JavaScript 也 可 以 做 到 这 一 点 ,但 jQuery 增强 并 扩展 了 基本 的 事件 处 理 机 制 。 
它 不 仅 提 供 了 更 加 优雅 的 事件 处 理 语法 ， 而 且 也 极 大 地 增强 了 事件 处 理 机 种 
本 章 将 学 习 以 下 内 容 : 

口 在 页 面 就 绪 时 执行 JavaScript 代 码 ; 

口 处 理 用 户 事 件 ， 比 如 鼠标 单 击 和 按 下 键盘 上 的 键 ; 
口 文档 中 的 事件 流 ， 以 及 如 何 操纵 事件 流 ; 

口 模拟 用 户 发 起 的 事件 。 


3.1 在 页 面 加 载 后 执行 任务 


我 们 已 经 看 到 如 何 让 jQuery 响应 网 页 的 加 载 事件 ，$ (document) .ready () 事件 处 理 程序 可 
以 用 来 触发 函数 中 的 代码 ， 但 对 这 个 过 程 还 有 待 深入 分 析 。 


3.1.1 代码 执行 的 时 机 选择 


在 第 1 章 中 ,我 们 知道 了 $ (document) .ready () 是 jQuery 基于 页 面 加 载 执行 任务 的 一 种 主要 
方式 。 但 这 并 不 是 唯一 的 方式 ， 原 生 的 windqow.onload 事 件 也 可 以 实现 相同 的 效果 。 虽 然 这 两 
个 方法 具有 类 似 的 效果 , 但 是 , 它们 在 触发 操作 的 时 间 上 存在 着 微妙 的 差异 ,这 种 差异 只 有 在 加 
载 的 资源 多 到 一 定 程 度 时 才 会 体现 出 来 。 

当 文 档 完 全 下 载 到 浏览 器 中 时 ， 会 触发 wvindow .onload 事 件 。 这 意味 着 页 面 上 的 全 部 元 素 
对 JavaScript 而 言 都 是 可 以 操作 的 , 这 种 情况 对 编写 功能 性 的 代码 非常 有 利 , 因为 无 需 考虑 加 载 的 
次 序 。 

男 一 方面 , 通过 $ (document) .ready () 注 册 的 事件 处 理 程序 , 则 会 在 DOM 完 全 就 绪 并 可 
以 使 用 时 调用 。 虽然 这 也 意味 着 所 有 元 素 对 脚本 而 言 都 是 可 以 访问 的 , 但 是 ， 却 不 意味 着 所 有 
关联 的 文件 都 已 经 下 载 完 毕 。 换 名 话说 ， 当 HTML 下 载 完 成 并 解析 为 DOM 树 之 后 ,代码 就 可 以 


运行 。 
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元 素 中 把 <link rel="stylesheet"> 标 签 和 <style> 标 签 放 在 <script> 标 


第 

加 载 样式 与 执行 代码 

a 为 了 保证 JavaScript 代 码 执 行 以 前 页 面 已 经 应 用 了 样式 ， 最 好 是 在 <head> 
签 前 面 o 








举 一 个 例子 , 假设 有 一 个 表现 图 库 的 页 面 , 这 种 页 面 中 可 能 会 包含 许多 大 型 图 像 , 我们 可 以 通 
过 jQuery 隐藏 、 显 示 、 移 动 或 以 其 他 方式 操纵 这 些 图 像 。 如 果 我 们 通过 onload 事件 设置 界面 ， 那 
么 用 户 在 能 够 使 用 这 个 页 面 之 前 ,必须 要 等 到 每 一 幅 图 像 都 下 载 完成 。 更 精 糕 的 是 ,如 果 行为 尚未 
添加 给 那些 具有 默认 行为 的 元 素 ( 例如 链接 ), 那么 用 户 的 交互 可 能 会 导致 意 想不到 的 结果 。 然而 ， 
当 我 们 使 用 $ (aocument) .ready () 进 行 设 置 时 ， 这 个 界面 就 会 更 早 地 准备 好 可 用 的 正确 行为 。 






































什么 是 加 载 完成 
一 般 来 说 , 使 用 $ (document) .ready () 要 优 于 使 用 onload 事 件 处 理 程序 ， 
> 但 必须 要 明确 的 一 点 是 ， 因 为 支持 文件 可 能 还 没有 加 载 完成 ， 所 以 类 似 图 像 的 
高 度 和 宽度 这 样 的 属性 此 时 则 不 一 定 会 有 效 。 如 果 需 要 访问 这 些 属性 ， 可 能 就 
得 选择 实现 一 个 onload 事 件 处 理 程序 (或 者 是 使 用 jQuery 为 load 事 件 设置 处 理 
程序 )。 这 两 种 机 制 能 够 和 平 共 存 。 


3.1.2 ”基于 一 个 页 面 执行 多 个 脚本 


通过 JavaScript ( 而 不 是 指 直接 在 HTML 中 添加 处 理 程序 属性 ) 注册 事件 处 理 程序 的 传统 机 各 
是 ， 把 一 个 函数 指定 给 DOM 元 素 的 对 应 属性 。 例 如 ， 假 设 我 们 已 经 定义 了 如 下 函数 : 
function QoStuff() { 


// 执 行 某 种 任务 …… 
>》 


那么 ， 我 们 既 可 以 在 HTML 标 记 中 指定 该 函数 : 

<body onload="dostuff();"> 

也 可 以 在 JavaScript 代 码 中 指定 该 函数 : 

window.onload = doSstuff; 

这 两 种 方式 都 会 在 页 面 加 载 完成 后 执行 这 个 函数 。 但 第 2 种 方式 的 优点 在 于 ， 它 能 使 行为 更 
清晰 地 从 标记 中 分 离 出 来 。 








一 















































如 果 带 着 圆 括号 ， 函 数 会 被 立即 调用 ; 没有 圆 括 号 ， 函 数 名 就 只 是 函数 的 标识 


引用 函数 与 调用 函数 
a 这 里 在 将 函数 指定 为 处 理 程序 时 ， 省 略 了 后 面 的 圆 括号 ， 只 使 用 了 水 数 名 。 
符 或 函数 引用 ， 可 以 用 于 在 将 来 再 调用 函数 。 
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在 只 有 一 个 函数 的 情况 下 ， 这 样 做 没有 什么 问题 。 但 是 ,假设 我 们 又 定义 了 第 二 个 函数 : 


function doOotherSstuff() { 
/1 /执行 男 外 一 种 任务 …… 
} 


我 们 也 可 以 将 它 指定 为 基于 页 面 的 加 载 来 运行 : 

window.onload = doOtherSstuff; 

然而 , 这 次 指定 的 函数 会 取代 刚才 指定 的 第 一 个 函数 。 因 为 .onload 属 性 一 次 只 能 保存 对 一 
个 函数 的 引用 ， 所 以 不 能 在 现 有 的 行为 基础 上 再 增加 新 行为 。 

通过 $ (document) .reaqy() 机制 能 够 很 好 地 解决 这 个 问题 。 每 次 调用 这 个 方法 "都 会 向 内 
部 的 行为 队列 中 添加 一 个 新 函数 ， 当 页 面 加 载 完 成 后 ， 所 有 函数 都 会 被 执行 。 而 且 ， 这 些 函 数 会 
按照 注册 它们 的 顺序 依次 执行 ”。 











公平 地 讲 ，jQuery 并 不 是 解决 这 个 问题 的 唯一 方法 。 我 们 可 以 编写 一 个 

JavaScript 函 数 ， 用 它 构 造 一 个 调用 现 有 的 onloaq 事 件 处 理 程序 的 新 函数 ， 然 后 

， 再 调用 一 个 传 入 的 事件 处 理 程序 。 这 种 方法 可 以 避免 $(document) .ready() 这 

类 对 抗 性 处 理 程序 之 间 的 冲突 , 但 是 却 不 具有 我 们 刚才 所 讨论 的 那些 优点 。 在 现 

代 浏 览 器 中 (包括 IE9 ), 可 以 通过 W3C 标 准 的 document .addEventListener () 

方法 触发 DOMContentLoaded 事 件 。 但 是 ，jQuery 则 可 以 让 我 们 不 必 考 虑 浏览 器 
不 一 致 性 而 完成 这 一 任务 。 





3.1.3 .ready () 的 简写 形式 


前 面 提 到 的 $ (document) .ready () 结构 ,实际 上 是 在 基于 document 这 个 DOM 元 素 构 建 而 
成 的 jQuery 对 象 上 调用 了 .ready () 方 法 。$ () 函数 为 我 们 提供 了 一 种 简写 方式 。 当 给 它 传递 一 个 
函数 作为 参数 时 ，jQuery 会 隐 式 调用 .ready () 。 也 就 是 说 ， 对 于 : 

$ (document) .ready (function() { 


// 这 里 是 代码 ……… 
于 


也 可 以 简写 成 : 


$s(function() { 
// 这 里 是 代码 ……: 
办 ) 学 


虽然 这 种 语法 更 短 一 些 , 但 作者 推荐 使 用 较 长 的 形式 , 因为 较 长 的 形式 能 够 更 清楚 地 表明 代 
码 在 做 什么 。 




















Q@ 即 每 次 调用 $ (document) .ready () 方 法 。 
@) 通过 window .onload 虽 然 也 可 以 注册 多 个 函数 ， 但 却 不 能 保证 按 顺序 执行 。 
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3.1.4 向 .ready() 回 调 函 数 中 传 入 参数 


在 某 些 情况 下 ， 可 能 有 必要 在 同一 个 页 面 中 使 用 多 个 JavaScript 库 。 由 于 很 多 库 都 使 用 $ 标 识 
符 ( 因为 它 简 短 方便 )， 因 此 就 需要 一 种 方式 来 避免 名 称 冲 突 。 

为 解决 这 个 问题 ，jQuery 提 供 了 一 个 jouery.noconflict () 方 法 ， 调 用 该 方法 可 以 把 对 $ 
标识 符 的 控制 权 让 渡 还 给 其 他 库 。 使 用 jouery.noconflict () 方 法 的 一 般 模 式 如 下 : 

<script src="prototype.js"></script> 

<script src="jquery.js"></script> 

<script> 

jQuery .noConflict(); 
</script> 
<SCript sre="myscript,JS"></Seript> 


首先 ， 包 含 jQuery 之 外 的 库 ( 这 里 是 Prototype )。 然 后 ， 包 含 jQuery 库 ， 取 得 对 $ 的 使 用 权 。 
接着 ,调用 .noconf1ict() 方 法 让 出 $， 以 便 将 控制 权 交 还 给 最 先 包含 的 库 ( Prototype )。 这 样 
就 可 以 在 自 定义 脚本 中 使 用 两 个 库 了 一 一 但 是 , 在 需要 使 用 jQuery 方法 时 , 必须 记 住 要 用 jQuery 
而 不 是 $s 来 调用 。 

在 这 种 情况 下 , 还 有 一 个 在 .ready () 方 法 中 使 用 $ 的 技巧 。 我 们 传递 给 它 的 回调 函数 可 以 接 
收 一 个 参数 一 一 jQuery 对 象 本 身 。 利 用 这 个 参数 ， 可 以 重新 命名 jQuery 为 $， 而 不 必 担 心 造成 冲 
突 ， 如 下 面 的 代码 所 示 : 


jQuery (document) .ready (function($) { 
// 在 这 里 ， 可 以 正常 使 用 ! 
3 


或 者 ， 也 可 以 使 用 刚刚 介绍 的 简写 语法 : 
jQuery (function($) { 


// 使 用 $ 的 代码 
十: 


3.2 处理 简单 的 事件 


除了 页 面 加 载 之 外 ， 我 们 也 想 在 其 他 时 刻 完 成 某 个 任务 。 正 如 JavaScript 可 以 让 我 们 通过 
<body onload=" "> 或 windqow.onload 来 截获 页 面 加 载 事 件 一 样 ， 它 对 用 户 发 起 的 事件 也 提供 
了 相似 的 “挂钩 ”( hook )。 例 如 ， 鼠 标 单 击 ( onclick )、 表 单 被 修改 (onchange ) 以 及 窗口 
大 小 变化 (onresize ) 等 。 在 这 些 情况 下 ， 如 果 直 接 在 DOM 中 为 元 素 指 定 行为 ,那么 这 些 挂 钧 
也 会 与 我 们 讨论 的 on1o0ad 一 样 具 有 类 似 的 缺点 。 为 此 ，jQuery 也 为 处 理 这 些 事 件 提 供 了 一 种 改 
进 的 方式 。 


3.2.1 简单 的 样式 转换 器 
为 了 说 明 某 些 事件 处 理 技术 ， 我 们 假设 希望 茶 个 页 面 能 够 基于 用 户 的 输入 呈现 出 不 同 的 样 



















































































图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


3.2 ”处 理 简单 的 事件 37 





式 。 也 就 是 说 ， 人 允许 用 户 通过 单 击 按钮 来 切换 视图 , 包括 正常 视图 、 将 文本 限制 在 窑 列 中 的 视图 
和 适合 打印 的 大 字 内 容 区 视图 。 


渐进 增强 

> 在 创建 样式 转换 器 时 ， 优 秀 的 Web 开 发 人 员 应 该 遵守 渐进 增强 的 原则 。 第 5 

a 章 还 会 学 习 怎 么 在 jQuery 代码 中 向 样式 转换 器 内 注入 内 容 , 让 禁用 JavaScript 的 用 
户 看 不 到 与 功能 无 关 的 控件 。 





用 于 样式 转换 器 的 HTML 标记 如 下 所 示 


<div id="switcher" class="switcher"> 








<h3>Style Switcher</h3> 

<button id="switcher-default"> 
Default 

</button> 

<button id="switcher-narrow"> 
Narrow Column 

</button> 

<button id="switcher-large"> 
Large Print 

</button> 

</div> 


下 载 代码 示例 
y 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 
a 档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完整 的 示例 
代码 : Packt Publishing 网 站 http:/www.packtpub.com/support， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


在 与 页 面 中 其 他 HTML 标 记 和 基本 的 CSS 组 合 以 后 ， 我 们 可 以 看 到 如 图 3-1 所 示 的 页 面 外 观 。 








Style Switcher 


Default | | Narrow Column | | Large Print | 














A Christmas Carol 
In Prose, Being a Ghost Story of Christmas 
by Charles Dickens 
Preface 
I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my 
readers out of humour with themselves, with each other, with the season, or with me. May it haunt 
their houses pleasantly, and no one wish to lay it. 
Their faithful Friend and Servant, 
C.D. 
December, 1843. 


Stave I: Marley's Ghost 








MAD| EV wac doad: ta hanin with Thara ic nn doht whatovar :hot that Tho ronictor cf hic hisrial 


图 3-1 
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首先 ， 我 们 来 编写 Large Print 按 钮 的 功能 。 此 时 ， 需 要 一 点 CSS 代 码 来 实现 页 面 的 替换 视图 : 


body.large .chapter { 





font-size: 1.5em; 


} 

然后 ,我们 的 目标 就 是 为 <body> 标 签 应 用 1arge 类 。 这 样 会 导致 样式 表 对 页 面 进行 重新 格 
式 化。 按照 第 2 章 介 绍 的 知识 ， 添 加 类 的 语句 如 下 所 示 : 

$s('body') .addClass('large'); 

但 是 , 我 们 希望 这 条 语句 在 用 户 单 击 按钮 时 执行 ( 而 不 是 像 我 们 到 目前 为 止 看 到 的 那样 在 页 
面 加 载 后 执行 )。 为 此 ， 我 们 需要 引入 .on() 方 法 。 通 过 这 个 方法 ， 可 以 指定 任何 DOM 事 件 ， 并 
为 该 事件 添加 一 种 行为 。 此 时 ,事件 是 cl1ick， 而 行为 则 是 由 上 面 的 一 行 代码 构成 的 函数 ， 参 见 
代码 清单 3-1。 


代码 清单 3-1 


$s (document) .ready (function() { 

















$('#switcher-large') .on('click', function() { 
$s('body') .addClass('large'); 
过 
} 3 


现在 ， 当 单 击 Large Print 按 钮 时 ， 就 会 运行 函数 中 的 代码 ， 而 页 面 的 外 观 将 如 图 3-2 所 示 。 


Style Switcher 
| Default | | Narrow Column | | Large Print 


In Prose, Being a Ghost Story of Christmas 
by Charles Dickens 











A Christmas Carol 


Preface 


I HAVE endeavoured in this Ghostly little book, to raise the Ghost 
of an Idea, which shall not put my readers out of humour with 
themselves, with each other, with the season, or with me. May it 
haunt their houses pleasantly, and no one wish to lay it. 


Their faithful Friend and Servant, 





一 记 








图 3-2 


这 里 的 全 部 操作 就 是 绑 定 了 一 个 事件 。 我 们 前 面 介 绍 的 .*eaqy () 方 法 的 优点 在 此 也 同样 适 
用 。 多 次 调用 .on() 也 没有 任何 问题 ， 即 可 以 按 需 为 同一 个 事件 追加 更 多 的 行为 。 

但 是 , 这 还 不 是 完成 上 述 任务 的 最 优雅 或 者 说 最 有 效 的 方式 。 随 着 本 章 内 容 的 展开 , 我们 会 
对 刚才 的 代码 加 以 扩展 和 改进 ， 使 其 达到 足以 令 我 们 自豪 的 水 平 。 
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3.2.2 ”局 用 其 他 按钮 


现在 , Large Print 按 钮 开始 生效 了 。 接 下 来 , 我 们 要 以 类 似 的 方式 处 理 其 他 两 个 按钮 (Default 
和 Narrow )， 让 它们 也 都 执行 各 自 的 任务 。 这 个 过 程 很 简单 ， 即 分 别 使 用 .on () 为 它们 添加 一 个 
单 击 处 理 程序 ， 同 时 视 情 况 移 除 或 添加 类 。 完 成 之 后 的 代码 如 代码 清单 3-2 所 示 。 


代码 清单 3-2 
$s (document) .ready (function() { Cd 


$('#switcher-default') .on('click', function() { 
$('body') .removeClass('narrow'); 
$s('body') .removeClass('large'); 





学 

$('#switcher-narrow') .on('click', function() { 
$('body').addClass ('narrow'); 
$('body') .removeClass('large'); 

3 


$('#switcher-large') .on('click', function() { 
$s('body') .removeClass('narrow'); 
$s('body') .addClass('large'); 














以 下 是 配套 的 narrow 类 的 CSS 规 则 、 


body.narrow .chapter { 
width: 250px; 
} 


现在 ， 如 果 单 击 Narrow Column 按钮 ， 随 着 相应 的 CSS 和 生效， 文本 会 相应 变化 ， 如 图 3-3 
所 示 。 








Style Switcher 


| Default | | Narrow Column | | Large Print | 











A Christmas Carol 


In Prose, Being a Ghost Story of Christmas 
by Charles Dickens 


Preface 


I HAVE endeavoured in this Ghostly little 
book, to raise the Ghost of an Idea, which 
shall not put my readers out of humour 
with themselves, with each other, with 
the season, or with me. May it haunt 
their houses pleasantly, and no one wish 
to lay it. 


Their faithful Friend and Servant, 








-ns 





3-3 


单 击 Default 按 钮 将 从 <body> 标 签 中 同时 移 除 两 个 类 ， 让 页 面 恢复 为 初始 状态 。 
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3.2.3 ”利用 事件 处 理 程序 的 上 下 文 


虽然 样式 转换 器 的 功能 很 正常 ， 但 我 们 并 没有 就 哪个 按钮 处 于 当前 使 用 状态 对 用 户 给 出 反 
馈 。 为 此 ， 我 们 的 方法 是 在 按钮 被 单 击 时 ， 为 它 应 用 selected 类 ， 同 时 从 其 他 按钮 上 移 除 这 个 




















类 。selected 类 只 是 为 按钮 文本 添加 了 粗 体 样式 : 


.Selected { 
font-weight: bold; 
} 


为 了 实现 类 的 变换 ,可 以 按照 前 面 的 做 法 , 通过 ID 来 引用 每 个 按钮 ， 0 





用 或 移 除 类 。 不 过 ,这 一 次 我 们 要 探索 一 种 更 优雅 也 更 具 扩 展 性 的 解决 方案 , 这 个 方案 利用 了 事 


件 处 理 程序 运行 的 上 下 文 。 














当 触 发 任何 事件 处 理 程序 时 ， 关 键 字 tnis 引 用 的 都 是 携带 相应 行为 的 DOM 元 素 。 前 面 我 们 
谈 到 过 ，s () 函数 可 以 将 DOM 元 素 作为 参数 ， 而 this 关 键 字 是 实现 这 个 功能 的 关键 ”~。 通 过 在 事 
件 处 理 程序 中 使 用 $ (this)， 可 以 为 相应 的 元 素 创建 jQuery 对 象 ， 然 后 就 如 同 使 用 CSS 选 择 符 找 











到 该 元 素 一 样 对 它 进行 操作 。 


知道 了 这 些 之 后 ， 我 们 可 以 编写 出 下 面 的 代码 : 





S$(this).adqdqCclass('selected' ) ; 














把 这 行 代码 放 到 那 3 个 事件 处 理 程序 中 , 就 可 以 在 按钮 被 单 击 时 为 按钮 添加 selected 类 。 要 
从 其 他 按钮 中 移 除 这 个 类 ， 可 以 利用 jQuery 的 隐 式 迭代 特性 ， 并 编写 如 下 代码 : 





$('#switcher button') .removeClass!( 

















'selected'); 


这 行 代码 会 移 除 样式 转换 器 中 每 个 按钮 的 selecteq 类 。 
我 们 还 应 该 在 文档 就 绪 时 把 这 个 类 添加 到 Default 按 钮 上 。 因 此 ， 按 照 正确 的 次 序 放置 它们 ， 

















就 可 以 得 到 代码 清单 3-3。 
代码 清单 3-3 


$s (document) .ready (function() { 
$s('#switcher-default') 

.addClass('selected') 

.on('click', function() { 

$(" 

$(! 
$(! 
$s (this) .addClass('selected'); 
] 
$( 

$('body') .addClass('narrow'); 

$ 

$ 

$s (this) .addClass('selected'); 





switcher-narrow') .on('click', 


# 
(! 
('body') .removeClass('large'); 
('#switcher button') .removeClass!( 
( 





Q@ 即 人 允许 向 $ () 函数 传递 DOM 元 素 ， 也 是 为 了 更 


网 


body') .removeClass('narrow'); 
body') .removeClass('large'); 
#switcher button') .removeClass!( 


方便 地 将 弛 


| 


'selected'); 


function() { 


'selected'); 








用 DOM 元 素 的 this 转 换 为 jQuery 对 象 。 
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}); 

$('#switcher-large') .on('click', function() { 
$('body') .removeClass('narrow'); 
$s('body') .addClass('large'); 
$('#switcher button') .removeClass('selected'); 
$s (this) .addClass('selected'); 

上 

四 


这 样 ， 样 式 转换 需 就 会 对 用 户 给 出 适当 的 反馈 了 。 Ge 
利用 处 理 程序 的 上 下 文 将 语句 通用 化 , 可 以 使 代码 更 高 效 。 我 们 可 以 把 负责 突出 显示 的 代码 提 
取 到 一 个 单独 的 处 理 程序 中 ， 因 为 针对 3 个 按钮 的 突出 显示 代码 都 一 样 ， 结 果 如 代码 清单 3-4 所 示 。 


代码 清单 3-4 


s(dqocument) .ready (function() { 
$('#switcher-default') 
.addClass('selected') 
.on('click', function() { 
$s('body') .removeClass('narrow') .removeClass('large'); 
})3 
$('#switcher-narrow') .on('click', function() { 
'body') .addClass('narrow') .removeClass('large'); 





~ UU 


$s('#switcher-large') .on('click', function() { 
$s('body') .removeClass('narrow') .addClass('large'); 


$('#switcher button').on('click', function() { 
$('#switcher button') .removeClass('selected'); 
$s (this) .addClass('selected'); 

















} 

这 一 步 优 化 利用 了 我 们 讨论 过 的 3 种 jQuery 特性 。 第 一 , 在 通过 对 .on () 的 一 次 调用 为 每 个 按 
钮 都 绑 定 相同 的 单 击 事件 处 理 程序 时 ， 隐 式 和 迭代 机 制 再 次 发 挥 了 作用 。 第 二 ， 行 为 队列 机 制 让 我 
们 在 同一 个 单 击 事 件 上 绑 定 了 两 个 函数 ， 而 且 第 二 个 函数 不 会 覆盖 第 一 个 函数 。 最 后 ,我 们 使 用 
jQuery 的 连 级 能 力 将 每 次 添加 和 移 除 类 的 操作 压缩 到 了 一 行 代码 中 。 


3.2.4 ”使 用 事件 上 下 文 进一步 减少 代码 


我 们 刚才 的 代码 优化 实际 上 是 在 做 重 构 一 一 修改 已 有 代码 , 以 更 加 高 效 和 简洁 的 方式 实现 相 
同 任务 。 为 寻找 进一步 重 构 的 机 会 , 下 面 再 看 一 看 绑 定 到 每 个 按钮 的 行为 。 其 中 , .removeclass () 
方法 的 参数 是 可 选 的 ， 即 当 省 略 参数 时 ， 该 方法 会 移 除 元 素 中 所 有 的 类 。 利 用 这 一 点 ， 可 以 把 代 
人 码 再 改进 得 更 简单 一 些 ， 参 见 代 码 清单 3-5。 


代码 清单 3-5 
// 改 善 代 码 


$s (document) .ready (function() { 
$('#switcher-default') 
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.addClass('selected') 
-On(elick; function() { 
$('body') .removeClass(); 
] 
$('#switcher-narrow') .on('click', function() { 
$('body') .removeClass() .addClass('narrow'); 
}) 池 
$('#switcher-large') .on('click', function() { 
$('body') .removeClass() .addClass('large'); 
))3 
$s('#switcher button') .on('click', function() { 
$('#switcher button') .removeClass('selected'); 
s(this) .addClass('selected'); 
站 
3} 


注意 , 为 了 适应 更 通用 的 移 除 类 的 操作 , 我 们 对 操作 顺序 作 了 小 小 的 调整 一 一 先 执行 .remove- 
class () ， 以 便 它 不 会 撤销 几乎 同时 执行 的 .adaclass ()。 


y 我 们 在 这 里 能 够 完全 移 除 所 有 类 ， 是 因为 现在 的 HTML 是 由 我 们 控制 的 。 当 
为 了 重用 而 编写 代码 时 ( 例如 编写 插件 )， 必 须 考虑 到 已 经 存在 的 所 有 类 并 保证 
它们 原封 不 动 。 


此 时 , 在 每 个 按钮 的 处 理 程序 中 仍然 会 执行 某 些 相同 的 代码 。 这些 代码 也 可 以 轻而易举 地 提 
取 到 通用 的 按钮 单 击 处 理 程序 中 ， 如 代码 清单 3-6 所 示 。 


代码 清单 3-6 


$s(document) .ready (function() { 
$('#switcher-default') .addClass('selected'); 
$('#switcher button').on('click', function() { 
$('body') .removeClass(); 
$('#switcher button') .removeClass('selected'); 
s(this) .addClass('selected'); 
})3 
$('#switcher-narrow') .on('click', function() { 
$('body') .addClass('narrow'); 
学 
$('#switcher-large') .on('click', function() { 
$s('body') .addClass('large'); 
3 
3} 


这 里 要 注意 的 是 , 必须 把 通用 的 处 理 程序 转移 到 特殊 的 处 理 程序 上 方 ,因为 .removeclass () 
需要 先 于 .adqdqclass () 执行 。 而 之 所 以 能 够 做 到 这 一 点 , 是 因为 jQuery 总 是 按照 我 们 注册 的 顺序 
来 触发 事件 处 理 程 序 。 

最 后 , 可 以 通过 再 次 利用 事件 的 执行 上 下 文 来 完全 消除 特殊 的 处 理 程序 。 因 为 上 下 文 关 键 字 
this 引 用 的 是 DOM 元 素 ， 而 不 是 jQuery 对 象 ， 所 以 可 以 使 用 原生 的 DOM 属 性 来 确定 被 单 击 元 素 
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的 ID。 因 而 , 就 可 以 对 所 有 按钮 都 绑 定 相同 的 处 理 程序 ,然后 在 这 个 处 理 程序 内 部 针对 按钮 执行 
不 同 的 操作 ， 参 见 代 码 清单 3-7。 


代码 清单 3-7 


$s (document) .ready (function() { 
$('#switcher-default') .addClass('selected'); 
$('#switcher button').on('click', function() { 
Var bodyClass = this.id.split('-')[1]; 
$s('body') .removeClass() .addClass (bodyClass); 
$('#switcher button') .removeClass('selected'); 
$s (this) .addClass('selected'); 
$s 
}) 3 


根据 单 击 的 按钮 不 同 ，bodyclass 变 量 的 值 可 能 是 default 、narrow 或 large。 这 里 与 前 
面 做 法 的 不 同 之 处 在 于 ， 我 们 会 在 用 户 单 击 <putton id="switcher-default"> 时 给 <body> 
添加 default 类 。 虽然 在 这 儿 添 加 这 个 类 也 用 不 着 , 但 与 因此 降低 的 复杂 性 相 比 ,仅仅 添加 一 个 
用 不 上 的 类 名 还 是 很 划算 的 。 


3.2.5 ”简写 的 事件 
鉴于 为 某 个 事件 ( 例如 简单 的 单 击 事件 ) 绑 定 处 理 程序 极为 常用 ， jQuery 提供 了 一 种 简化 事 























件 操作 的 方式 一 一 简写 事件 方法 ， 简 写 事件 方法 的 原理 与 对 应 的 .on () 调 用 相同 ， 可 以 减少 一 定 
的 代码 输入 量 。 


例如 ,不 使 用 .on () 而 使 用 .click() 可 以 将 前 面 的 样式 转换 需 程 序 重 写 为 如 代码 清单 3-8 所 示 。 
代码 清单 3-8 


s(dqocument) .ready (function() { 
$('#switcher-default') .addClass('selected'); 
$('#switcher button') .click(function() { 
Var bodyClass = this.id.split('-')[1]; 
$s('body') .removeClass() .addClass (bodyClass); 
$('#switcher button') .removeClass('selected'); 
$s (this) .addClass('selected'); 
3 
}) 


其 他 blur、keydown 和 scrol1 等 标准 的 DOM 事 件 , 也 存在 类 似 前 面 这 样 的 简写 事件 。 这些 
简写 的 事件 方法 能 够 把 一 个 事件 处 理 程序 绑 定 到 同名 事件 上 面 。 


3.2.6 显示 和 隐藏 高 级 特性 
假设 我 们 想 在 不 需要 时 隐藏 样式 转换 器 。 隐 藏 高 级 特性 ?的 一 种 便捷 方式 ， 就 是 使 它们 可 以 























Qz 这 里 所 谓 的 高 级 特性 就 是 指 为 页 面 提供 样式 切换 能 力 的 样式 转换 器 。 
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折 释 。 因 此 ， 我 们 要 实现 的 效果 是 在 标签 "上 单 击 能 够 隐藏 所 有 按钮 ， 最 后 只 简 一 个 标签 ; 而 再 
次 单 击 标签 则 会 恢复 这 些 按钮 。 为 了 隐藏 按钮 ， 我 们 还 需要 另外 一 个 类 : 
.hidden { 


display: none; 


} 

为 实现 这 个 功能 ,可 以 把 当前 的 按钮 状态 保存 在 一 个 变量 中 ,每 当 标 签 被 单 击 时 , 通过 检查 
这 个 变量 的 值 就 能 知道 应 该 向 这 些 按钮 中 添加 ， 还 是 要 从 这 些 按钮 中 移 除 .hidaen 类 。 

不 过 ，jQuery 也 为 我 们 提供 了 一 个 简便 的 toggleclass () 方 法 ， 能 够 根据 相应 的 类 是 否 存 
在 而 添加 或 删除 类 ， 参 见 代 码 清 单 3-9。 


代码 清单 3-9 


$s(document) .ready (function() { 
$s('#switcher h3').click(function() { 
$('#switcher button') .toggleClass('hidden'); 
))3 
站 站 


在 第 一 次 单 击 后 ， 所 有 按钮 都 会 隐藏 起 来 ， 如 图 3-4 所 示 。 



































Style Switcher 











A Christmas Carol 


In Prose, Being a Ghost Story of Christmas 
by Charles Dickens 


Preface 











图 3-4 
而 第 二 次 单 击 则 又 恢复 了 它们 的 可 见 性 ， 如 图 3-$ 所 示 。 








Style Switcher 


Default | | Narrow Column Large Print | 








A Christmas Carol 


In Prose, Being a Ghost Story of Christmas 
by Charles Dickens 








Preface 








图 3-5 


同样 ， 这 里 我 们 依靠 的 仍然 是 jQuery 的 隐 式 迭代 能 力 ， 即 一 次 就 能 隐藏 所 有 按钮 ， 而 不 需要 
使 用 包装 元 素 ”。 








人 这 里 将 #switcher h3 选 择 的 h3 标 题 元素 称 为 标签 。 下 同 。 
@) 即 不 需要 在 这 3 个 按钮 外 部 再 添加 额外 的 标签 ( 如 <qiv> )。 如 果 没 有 隐 式 迭代 机 制 ， 那 么 想 一 次 隐藏 3 个 按钮 ， 
一 种 常见 的 方法 就 是 隐藏 包含 这 3 个 按钮 的 包装 元 素 。 
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3.3 ”事件 传播 


在 说 明基 于 通常 不 可 单 击 的 页 面 元 素 " 处 理 单 击 事件 的 能 力 时 ， 我 们 构思 的 界面 中 已 经 给 出 
了 一 些 提 示 一 一 样式 表 切 换 器 标签 ( 即 <h3> 元 素 ) 实际 上 都 是 活动 的 ， 随 时 等 待 用 户 操作 。 为 
了 改进 界面 , 我 们 可 以 为 按钮 添加 一 种 翻转 状态 ,以 便 清楚 地 表明 它们 能 与 鼠标 进行 某 种 方式 的 
交互 : 
.hover { 
cursor: pointer; 


background-color: #afa; 


} 

CSS 规 范 加 入 了 一 个 名 叫 :hover 的 伪 类 选择 符 ， 这 个 选择 符 可 以 让 样式 表 在 用 户 鼠 标 指针 
悬 停 在 某 个 元 素 上 时 ,影响 元 素 的 外 观 。 这 个 伪 类 选择 符 在 某 种 程度 上 可 以 帮 有 我 们 解决 问题 , 但 
在 这 里 ， 我 们 要 介绍 jQuery 的 .hover 方 法 。 这 个 方法 可 以 让 我 们 在 鼠标 指针 进入 元 素 和 离开 元 
素 时 ， 通 过 JavaScript 来 改变 元 素 的 样式 一 一 事实 上 是 可 以 执行 任意 操作 。 

同 前 面 介绍 的 简单 事件 方法 不 同 ，.hover () 方 法 接受 两 个 函数 参数 。 第 一 个 函数 会 在 鼠标 
站 针 进入 被 选择 的 元 素 时 执行 , 而 第 二 个 函数 会 在 鼠标 指针 离开 该 元 素 时 触发 。 我 们 可 以 在 这 些 
时 候 修 改 应 用 到 按钮 上 的 类 ， 从 而 实现 翻转 效果 ， 参 见 代 码 清 单 3-10。 


代码 清单 3-10 


$s (document) .ready (function() { 
$s('#switcher h3') .hover (function() { 
s(this) .addClass('hover'); 
}, function() { 
$s (this) .removeClass('hover'); 
上 ) 
}); 


这 里 ， 我 们 再 次 使 用 隐 式 迭代 和 事件 上 下 文 实现 了 简洁 的 代码 。 现 在 ， 当 鼠标 指针 悬 停 在 
<h3> 上 时 ， 我 们 都 能 看 到 如 图 3-6 中 所 示 的 应 用 了 类 之 后 的 效果 。 


Style Switcher 由 
| Default | | Narrow Column | | Large Print | 


In Prose, Being a Ghost Story of Christmas 
by Charles Dickens 





















































A Christmas Carol 


Preface 
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图 3-6 









































Q@ 因为 在 这 个 例子 的 标记 中 ， 按 钮 是 通过 <dqiv> 元 素来 表现 的 ， 而 <aiv> 元 素 就 是 通常 不 可 单 击 的 页 面 元 素 。 
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而 且 , 使 用 .hover () 也 意味 着 可 以 避免 JavaScript 中 的 事件 传播 (event propagation ) 导致 的 
头痛 问题 。 要 理解 事件 传播 的 含义 , 首先 必须 搞 清 楚 JavaScript 如 何 决定 由 哪个 元 素来 处 理 给 定 的 
事件 。 


3.3.1 事件 的 旅程 


当 页 面 上 发 生 一 个 事件 时 ， 每 个 层次 上 的 DOM 元 素 都 有 机 会 处 理 这 个 事件 。 以 下 面 的 页 面 
模型 为 例 : 


<div class="foo"> 
<span class="bar"> 
<a href="http://www.example.com/"> 
The quick brown fox jumps over the lazy dog. 
</a> 
</span> 
<p> 
How razorback-jumping frogs can level six piqued gymnasts! 
/D> 
</div> 


当 在 浏览 器 中 形象 化 地 呈现 这 些 由 舱 套 的 代码 构成 的 元 素 时 , 我 们 看 到 的 效果 如 图 3-7 所 示 。 

















<span> 














图 3-7 


从 逻辑 上 看 , 任何 事件 都 可 能 会 有 多 个 元 素 负责 响应 。 举 例 来 说 ， 如 果 单 击 了 页 面 中 的 链接 
元 素 ,那么 <aiv> 、<span> 和 <a> 全 都 应 该 得 到 响应 这 次 单 击 的 机 会 。 毕 竟 ， 这 3 个 元 素 同时 都 
处 于 用 户 鼠 标 指针 之 下 。 而 <p> 元 素 则 与 这 次 交互 操作 无 关 。 

允许 多 个 元 素 响应 单 击 事件 的 一 种 策略 叫做 事件 捕获 "。 在 事件 捕获 的 过 程 中 ， 事 件 首先 会 
交 给 最 外 层 的 元 素 ， 接 着 再 交 给 更 具体 的 元 素 。 在 这 个 例子 中 ， 意 味 着 单 击 事件 首先 会 传递 给 
<dqiv>， 然 后 是 <span>， 最 后 是 <a> ， 如 图 3-8 所 示 。 






































从 技术 上 说 ， 在 浏览 器 捕获 事件 的 过 程 中 ， 每 个 元 素 都 会 注册 并 侦 听 发 生 
一 ”在 它们 后 代 元 素 中 的 事件 。 这 里 提供 的 近似 情况 非常 接近 于 我 们 的 需求 。 

















@ 事件 捕获 和 下 文中 的 事件 冒 泡 是 “浏览 器 大 战 ”时 期 分 别 由 Netscape 和 微软 提出 的 两 种 相反 的 事件 传播 模型 。 
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3-8 
另 一 种 相反 的 策略 叫做 事件 冒 泡 。 即 当 事 件 发 生 时 , 会 首先 发 送 给 最 具体 的 元 素 , 在 这 个 元 








素 获得 响应 机 会 之 后 , 事件 会 向 上 冒 泡 到 更 一 般 的 元 素 。 在 我 们 的 例子 中 ,<a> 会 首先 处 理事 件 ， 


然后 按照 顺序 依次 是 <span> 和 <div>， 如 图 3-9 所 示 。 
<p> | 
3-9 


毫 不 奇怪 , 不 同 的 浏览 器 开发 者 最 初 采用 的 是 不 同 的 事件 传播 模型 。 因 而 , 最 终 出 台 的 DOM 
标准 规定 应 该 同时 使 用 这 两 种 策略 : 首先 , 事件 要 从 一 般 元 素 到 具体 元 素 逐 层 捕 获 , 然后 , 事件 
再 通过 冒 泡 返 回 DOM 树 的 顶层 。 而 事件 处 理 程序 可 以 注册 到 这 个 过 程 中 的 任何 一 个 阶段 。 

为 了 确保 路 浏览 器 的 一 致 性 ， 而 且 也 为 了 让 人 容易 理解 ， jQuery 始终 会 在 模型 的 冒 泡 阶 段 注 
册 事 件 处 理 程序 。 因 此 ， 我 们 总 是 可 以 假定 最 具体 的 元 素 会 首先 获得 响应 事件 的 机 会 。 


3.3.2 ”事件 冒 泡 的 副作用 


事件 冒 泡 可 能 会 导致 始 料 不 及 的 行为 ， 特 别 是 在 错误 的 元 素 啊 应 mouseovezr 或 mouseout 事 
件 的 情况 下 。 假 设 在 我 们 的 例子 中 ， 为 <aiv> 添 加 了 一 个 mouseout 事 件 处 理 程序 。 当 用 户 的 鼠 
标 指针 退出 这 个 <aiv> 时 ， 会 按照 预期 运行 nouseout 处 理 程 序 。 因 为 这 个 过 程 发 生 在 顶层 元 素 
上 ， 所 以 其 他 元 素 不 会 取得 这 个 事件 。 但 是 ， 当 指针 从 <a> 元 素 上 离开 时 ，<a> 元 素 也 会 取得 一 
个 mouseout 事 件 。 然 后 ， 这 个 事件 会 向 上 冒 泡 到 <span> 和 <div>， 从 而 触发 上 述 的 事件 处 理 程 
序 。 这 种 冒 泡 序列 很 可 能 不 是 我 们 所 希望 的 。 

而 mouseenter 和 mouseleave 事 件 ， 无 论 是 单独 绑 定 ， 还 是 在 .hover () 方 法 中 组 合 绑 定 ， 
都 可 以 避免 这 些 冒 泡 问题 。 在 使 用 它们 人 处理 事件 的 时 候 ， 可 以 不 用 担心 某 些 非 目标 元 素 得 到 
mouseover 或 mouseout 事 件 导致 的 问题 。 





事件 冒 泡 
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刚才 介绍 的 mouseout 的 问题 说 明了 限制 事件 作用 域 的 必要 性 ,虽然 .hover () 可 以 处 理 这 种 
特殊 情况 , 但 在 其 他 情况 下 ， 我们 可 能 还 需要 从 空间 (阻止 事件 发 送 到 某 些 元 素 ) 和 时 间 ( 阻止 
事件 在 某 些 时 间 段 发 送 ) 上 限制 某 个 事件 。 


3.4 通过 事件 对 象 改 变 事件 的 旅程 


我 们 在 前 面 已 经 举例 说 明 事 件 冒 泡 可 能 会 导致 问题 的 一 种 情形 。 为 了 展示 一 种 .hover () 也 
无 能 为 力 的 情况 "， 需 要 改变 前 面 实现 的 折 又 行为 。 

假设 我 们 希望 增 大 触发 样式 转换 器 折 又 或 扩展 的 可 单 击 区 域 。 一 种 方案 就 是 将 事件 处 理 程序 
从 标签 移 至 包含 它 的 <aiv> 元 素 。 在 代码 清单 3-9 中 ， 我 们 给 #switcher h3 添 加 了 一 个 click 处 
理 程序 ， 在 这 里 我 们 要 尝试 给 #switcher 添 加 这 个 处 理 程 序 ， 如 代码 清单 3-11 所 示 。 


代码 清单 3-11 
// 未 完成 的 代码 


$s(document) .ready (function() { 
$('#switcher') .click(function() { 
$('#switcher button') .toggleClass('hidden'); 
学 
} 


这 种 改变 会 使 样式 转换 器 的 整个 区 域 都 可 以 通过 单 击 切换 其 可 见 性 。 但 同时 也 造成 了 一 个 问 
题 , 即 单 击 按钮 会 在 修改 内 容 区 的 样式 之 后 折 县 样 式 转换 器 。 导 致 这 个 问题 的 原因 就 是 事件 冒 泡 ， 
即 事件 首先 被 按钮 处 理 ， 然 后 又 沿 着 DOM 树 向 上 传递 ， 直至 到 达 <aiv id="switcher"> 激 活 事 
件 处 理 程序 并 隐藏 按钮 。 

要 解决 这 个 问题 ， 必 须 访问 事件 对 象 。 事 件 对象 是 一 种 DOM 结 构 ， 它 会 在 元 素 获 得 处 理事 
件 的 机 会 时 传递 给 被 调用 的 事件 处 理 程序 。 这 个 对 象 中 包含 着 与 事件 有 关 的 信息 ( 例如 事件 发 生 
时 的 鼠标 指针 位 置 )， 也 提供 了 可 以 用 来 影响 事件 在 DOM 中 传递 进程 的 一 些 方法 。 








































































































.事件 对 象 的 引用 
1 要 详细 了 解 jQuery 对 事件 对 象 及 其 属性 的 实现 ， 请 参考 http:/apijquery.comy/ 
category/events/event-object/。 








为 了 在 处 理 程序 中 使 用 事件 对 象 ， 需 要 为 函数 添加 一 个 参数 : 


$s (document) .ready (function() { 
$('#switcher') .click(function(event) { 
$('#switcher button') .toggleClass('hidden'); 
}); 
es 












































Q@ 这 种 情况 是 指 为 元 素 的 单 击 事件 注册 处 理 程序 ， 而 不 是 像 前 面 那样 为 悬 停 事件 注册 处 理 程序 。 所 以 ， 这 种 情况 下 
只 能 使 用 . click () 方 法 ， 而 不 能 使 用 .hovez () 方 法 。 
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注意 ,这 里 把 事件 对 象 命名 为 event ， 这 主要 是 为 了 让 大 家 一 看 就 知道 它 是 什么 对 象 , 不 是 
必须 这 样 命名 的 。 就 算 你 把 它 命名 为 flapjacks (煎饼 )， 也 没有 任何 问题 。 


3.4.1 事件 目标 


现在 ， 事 件 处 理 程序 中 的 变量 svent 保 存 着 事件 对 象 。 而 event .target 属 性 保存 着 发 生 事 
件 的 目标 元 素 。 这 个 属性 是 DOM API 中 规定 的 ,但 是 没有 在 某 些 旧 版 本 的 浏览 需 中 实现 。jQuery 
对 这 个 事件 对 象 进行 了 必要 的 扩展 ， 从 而 在 任何 浏览 器 中 都 能 够 使 用 这 个 属性 。 通 过 .target， 
可 以 确定 DOM 中 首先 接收 到 事件 的 元 素 ( 即 实际 被 单 击 的 元 素 )。 而 且 , 我 们 知道 this 引 用 的 是 
处 理事 件 的 DOM 元 素 ， 所 以 可 以 编写 出 代码 清单 3-12。 


代码 清单 3-12 
// 未 完成 的 代码 


$s (document) .ready (function() { 
$s('#switcher') .click(function(event) { 
if (event.target == this) { 
$s('#switcher button') .toggleClass('hidden'); 



























































上 上) 
二 





























此 时 的 代码 确保 了 被 单 击 的 元 素 是 <aiv id="switcher">”， 而 不 是 其 他 后 代 元 素 。 现 在 ， 
单 击 按钮 不 会 再 折 县 样式 转换 器 ， 而 单 击 转换 器 背景 区 则 会 触发 折 笃 操作。 但 是 ， 单 击 标签 
( <h3> ) 同样 什么 也 不 会 发 生 ， 因 为 它 也 是 一 个 后 代 元 素 。 实 际 上 ,我 们 可 以 不 把 检查 代码 放 在 
这 里 ， 而 是 通过 修改 按钮 的 行为 来 达到 目标 ?。 


3.4.2 ”停止 事件 传播 


事件 对 象 还 提供 了 一 个 .stoppropagation() 方 法， 该 方法 可 以 完全 阻止 事件 冒 泡 。 
与 .target 类 似 , 这 个 方法 也 是 一 种 基本 的 DOM 特 性 ,但 在 IE8 及 更 早 版 本 中 则 无 法 安全 地 使 用 ”。 
不 过 ， 只 要 我 们 通过 jQuery 来 注册 所 有 的 事件 处 理 程序 ， 就 可 以 放心 地 使 用 这 个 方法 。 

下 面 ， 我 们 会 出 除 刚才 添加 的 检查 语句 event target -- this， 并 在 按钮 的 单 击 处 理 各 
序 中 添加 一 些 代码 ， 参 见 代码 清单 3-13。 


代码 清单 3-13 


$s (document) .ready (function() { 
$('#switcher') .click(function(event) { 


$s('#switcher button') .toggleClass('hidden'); 
二 
















































































Q@ 即 上 只 有 在 <div id="switcher"> 被 单 击 时 才 会 执行 样式 转换 器 的 折 秋 操作 。 
@ 即 单 击 标签 和 qdiv 元 素 就 可 以 折 徐 ,但 单 击 按 钮 不 会 折 和 的 目标 。 
@ 这 里 指 在 正中 要 阻止 事件 冒 泡 ， 需 要 将 事件 对 象 的 cancelBubble 属 性 设置 为 false。 
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$s(document) .ready (function() { 
$('#switcher-default') .addClass('selected'); 
$('#switcher button').click(function(event) { 
var bodvClass. = this.ideplit (=) [L113 
$('body') .removeClass() .addClass (bodyClass); 
$('#switcher button') .removeClass('selected'); 
$s (this) .addClass('selected'); 
event .stopPropagation(); 
))3 
加: 


同 以 前 一 样 ， 需 要 为 用 作 单 击 处 理 程序 的 函数 添加 一 个 参数 ， 以 便 访 问 事件 对 象 。 然 后 , 通 
过 调用 event .stopPropagation() 就 可 以 避免 其 他 所 有 DOM 元 素 响 应 这 个 事件 。 这 样 一 来 ， 
单 击 按钮 的 事件 会 被 按钮 处 理 , 而 且 只 会 被 按钮 处 理 。 单 击 样式 转换 右 的 其 他 地 方 则 可 以 折 芭 和 
扩展 整个 区 域 。 








3.4.3 ”阻止 默认 操作 





如 果 我 们 把 单 击 事件 处 理 程序 注册 到 销 元 素 ( <a> ), 而 不 是 外 层 的 <aiv> 上 , 那么 就 要 面 对 
另外 一 个 问题 ， 当 用 户 单 击 链接 时 , 浏览 器 会 加 载 一 个 新 页 面 。 这 种 行为 与 我 们 讨论 的 事件 处 理 
程序 不 是 同一 个 概念 ， 它 是 单 击 销 元 素 的 默认 操作 。 类 似 地 ， 当 用 户 在 编辑 完 表 单 后 按 下 回 车 键 
时 ， 会 触发 表单 的 submit 事 件 ， 在 此 事件 发 生 后 ， 表 单 提 交 才 会 真正 发 生 。 

即便 在 事件 对 象 上 调用 . stopPropagation () 方 法 也 不 能 禁止 这 种 默认 操作 ， 因 为 默认 操 
作 不 是 在 正常 的 事件 传播 流 中 发 生 的 。 在 这 种 情况 下 ，.preventDefault () 方 法 则 可 以 在 触发 
默认 操作 之 前 终止 事件 ”。 












































a 在 事件 的 环境 中 完成 了 茶 些 验证 之 后 ， 通 常会 用 到 .preventDefault ()。 
人 和 ie， 在 表单 提交 期 间 ， 我 们 会 时 用 户 是 否 填写 了 必 肝 字段 进 行 检查， 和 如 果 用 
户 没有 填写 相应 字段 ， 那 么 就 需要 阻止 默认 操作 。 


事件 传播 和 默认 操作 是 相互 独立 的 两 套 机 制 ， 在 二 者 任何 一 方 发 生 时 ， 都 可 以 终止 男 一 方 。 
如 果 想 要 同时 停止 事件 传播 和 默认 操作 ， 可 以 在 事件 处 理 程序 中 返回 false，, 这 是 对 在 事件 对 象 
上 同时 调用 .stopPropagation() 和 .preventDefault() 的 一 种 简写 方式 。 


3.4.4 ”事件 委托 


事件 冒 泡 并 不 总 是 带 来 问题 , 也 可 以 利用 它 为 我 们 带 来 好 处 。 事 件 委托 就 是 利用 冒 泡 的 一 项 
高 级 技术 。 通 过 事件 委托 ， 可 以 借助 一 个 元 素 上 的 事件 处 理 程 序 完成 很 多 工作 。 





























Q@ 在 正中 ,要 预防 默认 操作 发 生 ， WR i et it a nd i 不 过 , 在 使 用 jQuery 注册 事 
件 处 理 程序 时 不 必 考 虑 浏览 器 ， 只 需 使 用 文中 提 到 的 标准 方法 即 可 。 
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在 我 前 面 的 例子 中 ， 只 有 3 个 <div class="button"> 元 素 注册 了 单 击 处 理 程序 。 假 如 我 们 
想 为 更 多 元 素 注册 人 处理 程序 怎么 办 ?这 种 情况 比 我 们 想象 的 更 常见 。 例如 ,有 一 个 显示 信息 的 大 
型 表格 , 每 一 行 都 有 一 项 需要 注册 单 击 处 理 程序 。 虽然 不 难 通过 隐 式 迭代 来 指定 所 有 单 击 处 理 程 
序 ， 但 性 能 可 能 会 很 成 问题 ， 因 为 循环 是 由 jQuery 在 内 部 完成 的 ， 而 且 要 维护 所 有 处 理 程序 也 需 
要 占用 很 多 内 存 。 

为 解决 这 个 问题 ， 可 以 只 在 DOM 中 的 一 个 祖先 元 素 上 指定 一 个 单 击 处 理 程序 。 由 于 事件 会 
冒 泡 ， 未 遭 拦截 的 单 击 事件 最 终 会 到 达 这 个 祖先 元 素 ， 而 我 们 可 以 在 此 时 再 作出 相应 处 理 。 

下 面 我 们 就 以 样式 转换 器 为 例 (尽管 其 中 的 按钮 数量 还 不 至 于 使 用 这 种 方法 )， 说 明 如 何 使 
用 这 种 技术 。 从 代码 清单 3-12 中 可 以 看 到 ， 当 发 生 单 击 事件 时 ， 可 以 使 用 svent .target 属 性 检 
查 鼠 标 指 针 下 方 是 什么 元 素 。 下 面 是 代码 清单 3-14。 


代码 清单 3-14 


$s (document) .ready (function() { 
$s('#switcher') .click(function(event) { 
if ($(event.target).is('button')) { 
Var bodyClass = event.target.id.split('-')[1]; 
$s('body') .removeClass() .addClass (bodyClass); 
$('#switcher button') .removeClass('selected'); 
$s (event.target) .addClass('selected'); 
event .stopPropagation(); 















































})3 
四 这 


这 里 使 用 了 一 个 新 方法 ， 即 .is () 。 这 个 方法 接收 一 个 选择 符 表达 式 〈 第 2 章 介绍 过 )， 然 后 
用 选择 符 来 测试 当前 的 jQuery 对 象 。 如 果 集 合 中 至 少 有 一 个 元 素 与 选择 符 匹 配 , .is () 返 回 true。 
在 这 个 例子 中 ，s (event .target) .is('button') 测 试 被 单 击 的 元 素 是 否 包 含 button 标 签 。 
如 果 是 ， 则 继续 执行 以 前 编写 的 那些 代码 一 一 但 有 一 个 明显 的 不 同 ， 即 此 时 的 关键 字 this 引 用 
的 是 <div idq="switcher">。 换 句 话说 ， 如 果 现 在 需要 访问 被 单 击 的 按钮 ， 每 次 都 必须 通过 
event. target 来 | 用 。 






































AI is() 与 .hasClass() 
要 测试 元 素 是 否 包 含 某 个 类 ， 也 可 以 使 用 另 一 个 简写 方法 .hasClass() 。 
不 过 ，.is() 方 法 则 更 灵活 一 些 ， 它 可 以 测试 任何 选择 符 表 达 式 。 





然而 ， 以 上 代码 还 有 一 个 不 期 而 至 的 连带 效果 。 当 按钮 被 单 击 时 ， 转 换 器 会 折 和 县 起 来 ， 就 像 
使 用 . stopPropagation () 之 前 看 到 的 效果 一 样 。 用 于 切换 转换 器 可 见 性 的 处 理 程序 ， 现 在 被 
绑 定 到 了 按钮 上 面 。 因此， 阻止 事件 冒 泡 并 不 会 影响 切换 发 生 。 要 解决 这 个 问题 ， 可 以 去 挥 
对 .stopPropagation() 的 调用 , 然后 添加 男 一 个 .is() 测 试 。 同样 随 着 把 整个 转换 右 <div> 
变 得 可 以 单 击 ， 还 应 该 在 用 户 鼠 标 悬 停 时 切换 hover 类 ， 如 代码 清单 3-15 所 示 。 
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代码 清单 3-15 


s(dqocument) .ready (function() { 
$('#Ssvwitcher') .hover(Eunction() { 
$s (this) .addClass('hover'); 
yy finetiornm(y 
$s (this) .removeClass('hover'); 
jy 
有 
$s(document) .ready (function() { 
$('#switcher') .click(function(event) { 
if (!$(event.target).is('button')) { 
$('#switcher button') .toggleClass('hidden'); 


$s (document) .ready (function() { 
$('#switcher-default') .addClass('selected'); 
$('#switcher') .click(function(event) { 
if ($(event.target).is('button')) { 
Var bodyClass = event.target.id.split('-')[1]; 
$s('body') .removeClass() .addClass (bodyClass); 
$('#switcher button') .removeClass('selected'); 
$s (event.target) .addClass('selected'); 


虽然 这 个 例子 的 代码 显得 稍微 复杂 了 一 点 , 但 随 着 带 有 


J 


hl 











有 件 处 理 程序 的 元 素数 量 增多 , 使 用 
事件 委托 终究 还 是 正确 的 技术 。 此 外 ， 通 过 组 合 两 个 click 事 件 处 理 程序 并 使 用 基于 .is () 测 试 
的 if-else 语 句 ， 可 以 减少 重复 的 代码 ， 参 见 代 码 清单 3-16。 


代码 清单 3-16 


s(dqocument) .ready (function() { 
$('#switcher-default') .addClass('selected'); 
$('#switcher') .click(function(event) { 
if ($(event.target).is('button')) { 
Var bodyClass = event.target.id.split('-')[1]; 
$s('body') .removeClass() .addClass (bodyClass); 
$('#switcher button') .removeClass('selected'); 
$s (event.target) .addClass('selected'); 
} else { 





$('#switcher button') .toggleClass('hidden'); 








以 上 代码 仍然 有 进一步 优化 的 余地 , 但 目前 这 种 情况 已 经 是 可 以 接受 的 了 。 不 过 , 为 了 更 深 
入 地 理解 jQuery 的 事件 处 理 ， 我 们 还 要 返回 代码 清单 3-16， 继 续 在 那个 版 本 上 修改 。 
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> 读者 在 本 章 后 面 可 以 看 到 ， 事 件 委托 在 另外 一 些 情况 下 也 很 有 用 ， 例 如 通 
N 过 DOM 操 作 方 法 添加 新 元 素 (第 5 章 ) 或 在 执行 AJAX 请 求 (第 6 章 ) 时 。 


3.4.5 使 用 内 置 的 事件 委托 功能 


由 于 事件 委托 可 以 解决 很 多 问题 ， 所 以 jQuery 专门 提供 了 一 组 方法 来 实现 事件 委托 。 前 面 讨 
论 过 的 .on () 方 法 可 以 接受 相应 参数 实现 事件 委托 ， 如 代码 清单 3-17 所 示 : 


代码 清单 3-17 


$('#switcher').on('click', 'button', function() { 
var bodyClass = event.target.id.split('-')[1]; 
$s('body') .removeClass() .addClass (bodyClass); 
$('#switcher button') .removeClass('selected'); 
$s (this) .addClass('selected'); 

3 


如 果 给 .on () 方 法 传人 的 第 二 个 参数 是 一 个 选择 符 表 达 式 ，jQuery 会 把 click 事 件 处 理 程序 
绑 定 到 #switcher 对 象 ， 同时 比较 event .target 和 选择 符 表 达 式 (这 里 的 'button' )。 如 果 匹 
配 ，jQuery 会 把 this 关 键 字 映射 到 匹配 的 元 素 ， 否 则 不 会 执行 事件 处 理 程序 。 




















介绍 


J Po 


| a 关于 .on() 以 及 .delegate() 和 .undelegate() 方 法 , 我 们 还 会 在 第 10 章 | 
详细 


3.5” 移 除 事 件 处 理 程序 


有 时候, 我 们 需要 停 用 以 前 注册 的 事件 处 理 程序 。 可 能 是 因为 页 面 的 状态 发 生 了 变化 ,导致 
相应 的 操作 不 再 有 必要 。 处 理 这 种 情形 的 一 种 典型 做 法 ， 就 是 在 事件 处 理 程序 中 使 用 条 件 语句 。 
但 是 ， 如 果 能 够 完全 移 除 处 理 程序 绑 定 显然 更 有 效率 。 

假设 我 们 希望 折 又 样式 转换 器 在 页 面 没有 使 用 正常 样式 的 情况 下 保持 扩展 状态 , 即 当 Narrow 
Column 或 Large Print 按 钮 被 选中 时 ， 单 击 样式 转换 器 的 背景 区 域 不 应 该 引发 任何 操作 。 为 此 ， 可 
以 在 单 击 非 默 认 样式 转换 按钮 时 ， 调 用 .off() 方 法 移 除 折 释 处 理 程序 ， 如 代码 清单 3-18 所 示 。 


代码 清单 3-18 


$s (document) .ready (function() { 
$('#switcher') .click(function(event) { 
IE (!$(event.target).is('button')) { 
$s('#switcher button') .toggleClass!( 











'hidden'); 
} 
> 


$('#switcher-narrow, #switcher-large') .click(function() { 
$('#switcher') .off('click'); 
}); 
}) 
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现在 ， 如 果 单 击 Narrow Column 按 钮 ， 样 式 转换 器 ( <div> ) 上 的 单 击 处 理 程序 就 会 被 移 除 。 
然后 ， 再 单 击 背景 区 域 将 不 会 导致 它 折 受 起 来 。 但 是 ,按钮 本 身 的 作用 却 失 效 了 ! 由 于 为 使 用 事 
件 委托 而 重 写 了 按钮 处 理 代码 , 因此 按钮 本 身 也 带 有 样式 转换 右 ( <aiv> ) 的 单 击 事件 处 理 程序 。 
换 名 话说， 在 调用 $( '#switcher') .off('click') 时 ， 会 导致 按钮 上 绑 定 的 两 个 事件 处 理 程 
序 都 被 移 除 。 


3.5.1 为 事件 处 理 程序 添加 命名 空间 


显然 ， 应 该 让 对 .off () 的 调用 更 有 针对 性 ， 以 避免 把 注册 的 两 个 单 击 处 理 程序 全 都 移 除 。 
达成 目标 的 一 种 方式 是 使 用 事件 命名 空间 , 即 在 绑 定 事件 时 引入 附加 信息 , 以便 将 来 识别 特定 的 
处 理 程序 。 要 使 用 命名 空间 ， 需 要 退 一 步 使 用 绑 定 事件 处 理 程序 的 非 简写 方法 ， 即 .on () 方 法 
本 刁 。 

我 们 为 .on () 方 法 传递 的 第 一 个 参数 ， 应 该 是 想 要 截获 的 事件 的 名 称 。 不 过 , 在 此 可 以 使 用 
一 种 特殊 的 语法 形式 ， 即 对 事件 加 以 细 分 ， 参见 代码 清单 3-19。 


代码 清单 3-19 


$s(document) .ready (function() { 
$('#switcher') .on('click.collapse', function(event) { 
If (!$(event.target).is('button')) { 
$('#switcher button') .toggleClass('hidden'); 
} 
) 汉 
S( '#Switcher-narrow，#Sswitcher-1Large').click(function() { 
$('#switcher') .off('click.collapse'); 
) 0 
了 这 


对 于 事件 处 理 系统 而 言 ， 后 缀 .collapse 是 不 可 见 的 。 换 名 话说， 这 里 仍然 会 像 纺 
写 .on('click') 一 样 ,让 注册 的 函数 响应 单 击 事件 。 但 是 , 通过 附加 的 命名 空间 信息 ， 则 可 以 
解除 对 这 个 特定 处 理 程序 的 绑 定 ， 同 时 不 影响 为 按钮 注册 的 其 他 单 击 处 理 程序 。 




























































































归 稍 后 读者 就 会 看 到 ， 还 有 另 一 种 可 以 让 .ofE() 调用 更 有 针对 性 的 方式 。 不 
过 ,事件 命名 空间 却 是 很 有 用 的 工具 。 第 11 章 将 会 介绍 到 ， 在 创建 插件 时 使 用 这 
个 工具 会 特别 方便 。 


3.5.2 ”重新 绑 定 事件 


现在 单 击 Narrow Column 或 Large Print 按 钮 ， 会 导致 样式 转换 器 的 折 县 功能 失效 。 可 是 ,我 们 
希望 该 功能 在 单 击 Default 按 钮 时 恢复 。 为 此 ， 应 该 在 Default 按 钮 被 单 击 时 ， 重 新 绑 定 事 件 处 理 
程序 。 

首先 ， 应 该 为 事件 处 理 程序 起 个 名 字 ， 以 便 多 次 使 用 ， 参 见 代 码 清单 3-20。 
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代码 清单 3-20 


$s (document) .ready (function() { 
va toggleSwitcher = function(event) { 
if (!$(event.target).is('button')) { 
$s('#switcher button') .toggleClass('hidden'); 
} 
}3 


$('#switcher') .on('click.collapse', toggleSwitcher); 


我 们 注意 到 ， 这 里 使 用 了 另 一 种 定义 函数 的 语法 ， 即 没有 使 用 函数 声明 (前 置 function 关 
键 字 )， 而 是 将 一 个 匿名 函数 表达 式 指定 给 了 一 个 局 部 变量 。 除 了 两 点 微妙 的 差异 〈 但 在 这 里 并 
不 存在 ) 之 外 , 无 论 使 用 哪 种 语法 ,它们 的 功能 都 是 等 价 的 。 这 里 使 用 函数 表达 式 只 是 为 了 从 形 
式 上 让 事件 处 理 程序 与 其 他 函数 定义 显得 类 似 。 

而 且 ， 我 们 知道 传递 给 .on () 的 第 二 个 参数 是 一 个 函数 引用 。 在 此 需要 强调 一 点 ,使 用 命名 
冰 数 时 ， 必 须 省 略 函 数 名 称 后 面 的 圆 括 号 。 圆 括号 会 导致 函数 被 调用 ， 而 非 被 引用 。 

在 函数 有 了 可 以 引用 的 名 字 之 后 ， 将 来 就 可 以 再 次 绑 定 而 无 需 重新 定义 它 了 ， 如 代码 清 
3-21 所 示 

















代码 清单 3-21 
// 未 完成 的 代码 


$s (document) .ready (function() { 
Var toggleSwitcher = function(event) { 
if (!$(event.target).is('button')) { 
$s('#switcher button') .toggleClass('hidden'); 
} 
}3 
$('#switcher') .on('click.collapse', toggleSwitcher); 
$('#switcher-narrow, #switcher-large') .click(function() { 
$('#switcher') .off('click.collapse'); 
上 
$('#switcher-default') .click(function() { 
$('#switcher') 
.on('click.collapse', toggleSwitcher); 
}) 3 
})3 


这 样 ， 切 换 样式 转换 右 的 行为 当 文 档 加 载 后 会 被 绑 定 。 当 单 击 Narrow Column 或 Large Print 
按钮 时 会 解除 绑 定 ， 而 当 此 后 再 单 击 Normal 按 钮 时 ， 又 会 恢复 绑 定 。 

使 用 命令 函数 还 有 另外 一 个 好 处 ， 即 不 必 再 使 用 事件 命名 空间 。 因 为 .off () 可 以 将 这 个 命 
名 函数 作为 第 二 个 参数 ， 结 果 只 会 解除 对 特定 处 理 程序 的 绑 定 。 但 这 样 就 会 遇 到 另 一 个 问题 ， 当 在 
jQuery 中 把 处 理 程序 绑 定 到 事件 时 ,之 前 绑 定 的 处 理 程序 仍然 有 效 。 在 这 个 例子 中 , 每 次 点 击 Normal， 
就 会 有 一 个 toggleSwitchez 的 副本 被 绑 定 到 样式 转换 器 。 换 句 话 说， 在 用 户 单 击 Narrow 或 Large 
Print 之 前 (这样 就 可 以 一 次 性 地 解除 对 toggleSwitchez 的 绑 定 )， 每 多 单 击 一 次 都 会 多 调用 一 次 
这 个 函数 。 
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在 绑 定 toggleSwitchezr 偶 数 次 的 情况 下 ， 单 击 样式 转换 器 (不 是 按钮 )， 好 像 一 切 都 没有 发 生 
变化 。 事 实 上 ， 这 是 因为 切换 了 hiaddqen 类 偶数 次 ， 结 果 状 态 与 开始 的 时 候 相 同 。 为 了 解决 这 个 问题 ， 
可 以 在 用 户 单 击 任意 按钮 时 解除 绑 定 ， 并 在 确定 单 击 按钮 的 ID 是 switcher-default 的 情况 下 再 重 
新 绑 定 ， 参 见 代码 清单 3-22。 




















代码 清单 3-22 


$(dqocument) .ready (function() { 
Var toggleSwitcher = function(event) { 
If (!$(event.target).is('button')) { 
( 


$('#switcher button') .toggleClass('hidden'); 


} 
和 
$('#switcher') .on('click', toggleSwitcher); 
$('#switcher button') .click(function() { 
$('#switcher') .off('click', toggleSwitcher); 
if (this.id== 'switcher-default') { 
$('#switcher') .on('click', toggleSwitcher); 


})3 
站 
对 于 只 需 触发 一 次 ， 随 后 要 立即 解除 绑 定 的 情况 也 有 一 种 简写 方法 .one () ， 这 个 简写 
方法 的 用 法 如 下 : 
$s('#switcher') .one('click', toggleSwitcher); 


这 样 会 使 切换 操作 只 发 生 一 次 ， 之 后 就 再 也 不 会 发 生 。 
3.6 ”模仿 用 忆 操 作 


有 时 候 , 即使 某 个 事件 没有 真正 发 生 , 但 如 果 能 执行 绑 定 到 该 事件 的 代码 将 会 很 方便 。 例 如 ， 
假设 我 们 想 让 样式 转换 器 在 一 开始 时 处 于 折 秋 状态 。 那 么 ， 可 以 通过 样式 表 来 隐藏 按钮 , 或 者 在 
$ (document) .ready () 处 理 程序 中 调用 .hiqe() 方 法 。 不过, 还 有 一 种 方法 ,就 是 模拟 单 击 样 
式 转换 器 ， 以 触发 我 们 设 定 的 折 麦 机制。 

通过 .triggez () 方 法 就 可 以 完成 模拟 事件 的 操作 ， 如 代码 清单 3-23 所 示 。 


代码 清单 3-23 


$s(document) .ready (function() { 
$('#switcher') .trigger('click'); 
})3 


这 样 ， 随 着 页 面 加 载 完 成 ,样式 转换 右 也 会 被 折 闭 起 来 ,就 好 像 是 被 单 击 了 一 样 。 结 果 如 图 
3-10 所 示 。 

如 果 我 们 想 向 禁用 JavaScript 的 用 户 隐藏 一 些 内 容 , 以 实现 优雅 降级 , 那么 这 就 是 一 种 非常 合 
适 的 方式 。 
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Style Switcher 








A Christmas Carol 


In Prose, Being a Ghost Story of Christmas 
by Charles Dickens 


Preface 














图 3-10 


.triggezr() 方 法 提供 了 一 组 与 .on () 方 法 相同 的 简写 方法 。 当 使 用 这 些 方法 而 不 带 参数 时 ， 
结果 将 是 触发 操作 而 不 是 绑 定 行为 ， 如 代码 清单 3-24 所 示 。 


代码 清单 3-24 


s(dqocument) .ready (function() { 
$('#switcher') .click(); 
})3 


响应 键盘 事件 


作为 另 一 个 例子 , 我 们 还 可 以 向 样式 转换 絮 中 添加 键盘 快捷 方式 。 当 用 户 输 入 每 种 显示 样式 
的 第 一 个 字母 时 ,可 以 让 页 面 像 响应 按钮 被 单 击 一 样 作出 响应 。 要 实现 这 种 功能 , 需要 先 了 解 键 
盘 事件 ， 键 盘 事 件 与 鼠标 事件 稍 有 不 同 。 

键盘 事件 可 以 分 为 两 类 : 直接 对 键盘 按键 给 出 响应 的 事件 ( keyup 和 keydown ) 和 对 文本 输 
入 给 出 响应 的 事件 ( keypress )。 输 入 一 个 字母 的 事件 可 能 会 对 应 着 几 个 按键 ,例如 输入 大 写 的 
X 要 同时 按 Shift 和 X 键 。 虽 然 各 种 浏览 器 的 具体 实现 有 所 不 同 〈 毫 不 奇怪 )， 但 有 一 条 实践 经 验 还 
是 比较 可 靠 的 : 如 果 想 知道 用 户 按 了 哪个 键 ， 应 该 侦 听 keyup 或 keydown 事 件 ; 如 果 想 知道 用 户 
输入 的 是 什么 字符 ， 应 该 侦 听 keypress 事 件 。 对 于 这 里 想 要 实现 的 功能 而 言 ， 我 们 只 想 知道 用 
户 什 么 时 候 按 下 了 D 、N 或 L 键 ， 因 而 就 要 使 用 keyup。 

接 下 来 , 需要 确定 哪个 元 素 应 该 侦 听 这 个 事件 。 相对 于 可 以 通过 鼠标 指针 确定 事件 目标 的 鼠 
标 事件 而 言 , 这 个 细节 就 没有 那么 明显 了 。 事实 上 , 键盘 事件 的 目标 是 当前 拥有 键盘 焦点 的 元 素 。 
元 素 的 焦点 可 能 会 在 儿 种 情况 下 转移 ， 包 括 单 击 鼠 标 和 按 下 Tab 键 。 并 非 所 有 元 素 都 可 以 获得 焦 
点 ， 只 有 那些 默认 情况 下 具有 键盘 驱动 行为 的 元 素 ， 如 表单 字段 、 链 接 ， 以 及 指定 了 tabIndex 
辕 性 的 元 素 才 可 以 获得 焦点 。 

对 于 眼前 的 例子 来 说 , 哪个 元 素 获得 焦点 其 实 并 不 重要 , 我 们 只 想 让 转换 器 在 用 户 按 下 某 个 
键 时 能 够 有 所 反应 ,这 一 次 , 又 可 以 利用 事件 冒 泡 了 一 一 因为 可 以 假设 所 有 键盘 事件 最 终 都 会 冒 
泡 到 aocument 元 素 ， 所 以 可 以 把 kevup 事 件 直接 绑 定 到 该 元 素 。 

最 后 ， 需 要 在 keyup 处 理 程序 被 触发 时 知道 用 户 按 下 了 哪个 键 。 此 时 可 以 检查 相应 的 事件 
对 象 ， 事 件 对 象 的 . which 属性 包含 着 被 按 下 的 那个 键 的 标识 符 。 对 于 字母 键 而 言 ， 这 个 标识 
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符 就 是 相应 大 写字 母 的 ASCII 值 。 因 此 ， 可 以 为 字母 和 相应 的 按钮 创建 一 个 对 象 字 面 量 。 在 用 
户 按 下 某 个 键 时 ， 可 以 查找 它 的 标识 符 是 否 在 这 个 对 象 里 ， 如 果 在 则 和 触发 单 击 事件 ， 参 见 代码 
清单 3-25。 














代码 清单 3-25 
$s(document) .ready (function() { 
var triggers = { 


D: 'default', 
Ns "narrow 
L: 'large' 
js 
$s (document) .keyup (function(event) { 
Var key = String.fromCharCode (event .which); 
if (key in triggers) { 
$('#switcher-' + triggers[key]) .click(); 
} 
3 
站 


这 样 , 按 下 这 三 个 键 中 的 任何 一 个 , 都 会 模拟 鼠标 对 相应 按钮 的 单 击 一 一 前 提 是 键盘 事件 没 
有 被 某 些 特性 〈 例如 Firefox 的 “在 输入 时 搜索 文本 ”功能 ) 所 截取 。 

除了 使 用 .trigger () 模 拟 单 击 外 ， 下 面 我 们 再 深入 一 步 ， 看 一 看 怎样 把 相关 代码 提取 到 一 
个 函数 中 ， 以 便 更 多 处 理 程序 (click 和 keyup ) 可 以 调用 它 。 尽 管 在 本 例 中 没有 必要 这 样 做 ， 
但 这 种 技术 确实 有 利于 消除 元 余 代 码 ， 参 见 代 码 清单 3-26。 


代码 清单 3-26 


s(dqocument) .ready (function() { 

/ /在 样式 转换 器 按钮 上 启用 哑 停 效果 

$('#switcher') .hover (function() { 
$s (this) .addClass('hover'); 

js funetiorm(}y 
$s (this) .removeClass('hover'); 

] 

// 让 样式 转换 器 能 够 扩展 和 折 营 

Var toggleSwitcher = function(event) { 
If (!S(event .target) .is('bputton')) { 

$('#switcher bputton') .toggleClass('hidden'); 


hu 

















} 
ja 
$('#switcher') .on('click', toggleSwitcher); 

/ /模拟 一 次 单 击 ， 以 便 开 始 时 处 理 折 沾 状态 
$('#switcher') .click(); 

//setBodyClass () 用 于 修改 页 面 样式 

/ /样式 转换 器 的 状态 也 会 被 更 新 

Var setBodyClass = function(className) { 

$s('body') .removeClass() .addClass (className); 

$('#switcher button') .removeClass('selected'); 

$('#switcher-' + className) .addClass('selected'); 
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$('#switcher') .off('click', toggleSwitcher); 
if (className == 'default') { 
$('#switcher') .on('click', toggleSwitcher); 
} 
}; 
// 开 始 的 时 候 先 选中 switcher-adefault 按 钮 
$('#switcher-default') .addClass('selected'); 
// 上 映射 键 码 和 对 应 的 按 鱼 
var triggers = { 
D: 'default', 
Ns: ‘narrow', 
L: 'large' 
下 
// 当 按钮 被 单 击 时 调用 setBodyClass () 
$('#switcher') .click(function(event) { 
if ($(event.target).is('button')) { 
var bodyClass = event.target.id.split('-')[1]; 
setBodyClass (bodyClass); 
} 
下 
// 当 按 下 相应 按键 时 调用 setBodyClass () 
$s (document) .keyup (function(event) { 
Var key = String.fromCharCode (event.keyCode); 
if (key in triggers) { 
setBodyClass (triggers[key]); 


}) > 


最 后 这 次 修改 整合 了 本 章 前 面 所 有 的 代码 示例 。 我 们 把 整 块 代码 都 挪 到 了 $ (document). 


ready () 处 理 程序 中 ， 代 码 看 起 来 没有 那么 见长 了 。 


3.7 小结 


章 学 习 了 各 种 响应 用 户 及 浏览 器 发 起 事件 的 方法 ， 包 括 如 何在 页 面 加 载 时 安全 地 执行 代 


码 、 如 何 处 理 单 击 链 接 和 芒 停 按钮 时 的 鼠标 事件 ， 以 及 如 何 截 获 按键 输入 。 
此 外 ,我 们 介绍 了 事件 系统 的 内 部 机 制 , 并 据 以 实现 了 事件 委托 和 改变 寻 


7 











都 可 以 模仿 用 户 发 起 事件 。 


了 件 行为 。 我 们 甚至 


基于 这 些 技 术 , 可 以 构建 极 具 交互 性 的 页 面 。 下 一 章 , 我 们 学 习 如 何在 这 些 交互 中 给 用 户 提 











供 反馈 。 
延伸 阅读 

要 了 解 有 关 选 择 符 与 遍历 方法 的 完整 介绍 ， 请 参考 
http://api.jquery.com/。 


网 
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3.8 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
“挑战 ”练习 有 一 些 难度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : http:// 
api.jquery.com/。 
(1) 在 Charles Dickens 被 单 击 时 ， 给 它 应 用 selecteq 样 式 。 
(2) 在 双击 章 标题 ( <h3 class="chapter-title"> ) 时 , 切换 章 文 本 的 可 见 性 。 
(3) 当 用 户 按 下 辐 右 方向 键 时 ， 切 换 到 下 一 个 bodqy 类 ; 右 方 同 键 的 键 码 是 39。 
(4) 挑战 : 使 用 console.1og() 函数 记录 在 段落 中 移动 的 鼠标 的 坐标 位 置 。( 注意 : console.1og() 
可 以 在 Firefox 的 firebug 扩 展 、Safari 的 Web Inspector 或 Chrome、IE 中 的 Developer Tools 中 使 
用 。 ) 
(3) 挑战 : 使 用 .mousedown () 和 .mouseup () 跟踪 页 面 中 的 鼠标 事件 。 如 果 鼠 标 按键 在 按 下 
它 的 地 方 被 释放 ， 则 为 所 有 段落 添加 hidaaden 类 。 如 果 是 在 按 下 它 的 地 方 之 下 被 释放 的 ， 
删除 所 有 段落 的 hiadqen 类 。 
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如 果 说 行 胜 于 言 ， 那 么 在 JavaScript 的 世界 里 ， 效 果 则 会 令 操 作 体验 更 胜 一 筹 。 通 过 jQuery， dl 
我 们 不 仅 能 够 轻松 地 为 页 面 操 作 添 加 简单 的 视觉 效果 ， 其 至 能 创建 更 精致 的 动画 。 
jQuery 效果 确实 能 增添 艺术 性 ， 一 个 元 素 逐 渐 滑 入 视野 而 不 是 突然 出 现时 ， 带 给 人 的 美感 是 
不 言 而 喻 的 。 此 外 ， 当 页 面 发 生变 化 时 ,通过 效果 吸引 用 户 的 注意 力 , 则 会 显著 增强 页 面 的 可 用 
性 〈 在 Ajax 应 用 程序 中 尤其 常见 )。 
本 章 ， 我 们 将 学 习 以 下 内 容 : 
口 动态 修改 元 素 的 样式 ; 
口 通过 各 种 内 置 效 果 隐 藏 和 显示 元 素 ; 
口 创建 自 定 义 的 元 素 动 画 ; 
口 实现 一 个 接 一 个 的 效果 排队 。 


4.1 修改 内 联 CSS 


在 接触 漂亮 的 jQuery 效果 之 前 ， 有 必要 先 简单 地 谈 一 谈 CSS。 在 前 几 章 中 ， 为 了 修改 文档 的 
外 观 , 我 们 都 是 先 在 单独 的 样式 表 中 为 类 定义 好 样式 , 然后 再 通过 jQuery 来 添加 或 者 移 除 这 些 类 。 
般 而 言 ， 这 都 是 为 HTML 应 用 CSS 的 首选 方式 ， 因 为 这 种 方式 不 会 影响 样式 表 负 责 处 理 页 面 表 
现 的 角色 。 但 是 , 在 有 些 情 况 下 ， 可 能 我 们 要 使 用 的 样式 没有 在 样式 表 中 定义 ， 或 者 通过 样式 表 
定义 不 是 那么 容易 。 针 对 这 种 情况 ，jQuery 提 供 了 .css () 方 法 。 
这 个 方法 集 getter ( 获取 方法 ) 和 setter ( 设置 方法 ) 于 一 身 。 为 取得 某 个 样式 属性 的 值 ， 可 
以 为 这 个 方法 传递 一 个 字符 串 形 式 的 属性 名 , 然后 同样 得 到 一 个 字符 串 形 式 的 属性 值 。 要 取得 多 
个 样式 属性 的 值 ， 可 以 传人 属性 名 的 数组 ， 得 到 的 则 是 属性 和 值 构成 的 对 象 。 对 于 
backgroundColor 这 样 由 多 个 单词 构成 的 属性 名 , jQuery 既 可 以 解释 连 字符 版 的 CSS 表 示 法 ( 如 
background-color )， 也 可 以 解释 驼峰 大 小 写 形式 (camel-cased ) 的 DOM 表 示 法 (如 
backgroundColor )。 
/7 取得 单个 属性 的 值 


.Css('property') 
// 返 回 "value" 
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// 取 得 多 个 属性 的 值 
.Css(['propertyl', 'property-2']) 
// 返 回 {"property1l": "valuel", "property-2": "value2"} 


在 设置 样式 属性 时 ，.css () 方 法 能 够 接受 的 参数 有 两 种 ， 一 种 是 为 它 传递 一 个 单独 的 样式 
属性 和 值 ， 男 一 种 是 为 它 传递 一 个 由 属性 - 值 对 构成 的 对 象 : 
/ /单个 属性 及 其 值 


.Css('property', 'value') 






































| 


// 必 性- 值 对 构成 的 对 象 


.CSS (1{ 
propertyl: 'valuel', 
'property-2': 'value2' 


}) 
这 些 键 值 的 集合 叫 对 象 字面 量 ， 是 在 代码 中 直接 创建 的 JavaScript 对 象 。 








对 象 字 面 量 
一 般 来 说 ， 数 字 值 不 需要 加 引号 而 字符 串 值 需要 加 引号 。 由 于 属性 名 是 字 
\ 符 串 ， 所 以 属性 通常 是 需要 加 引号 的 。 但 是 ， 如 果 对 象 字面 量 中 的 属性 名 是 有 
效 的 JavaScript 标 识 符 ， 比 如 使 用 驼峰 大 小 写 形式 的 DOM 表 示 法 时 ， 则 可 以 省 略 
引号 。 


使 用 .css () 的 方式 与 前 面 使 用 .adqdclass () 的 方式 相同 一 一 将 它 连 级 到 jQuery 对 象 后 面 ， 
这 个 jQuery 对 象 包含 一 组 DOM 元 素 。 为 此 ， 我 们 仍 以 第 3 章 的 样式 转换 器 为 例 ， 但 这 次 使 用 的 
HTML 稍 有 不 同 : 


<div id="switcher"> 
<div class="label">Text Size</div> 
<button id="switcher-default">Default</button> 
<button id="switcher-large">Bigger</button> 
<button id="switcher-small">Smaller</button> 
</div> 
<div class="speech"> 
<p>Fourscore and seven years ago our fathers brought forth 
on this continent a new nation, conceived in liberty, 
and dedicated to the proposition that all men are created 











equal .</p> 
2/ divs 
下 载 代码 示例 
yl 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 


档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完整 的 示例 
代码 : Packt Publishing 网 站 http:/www.packtpub.com/support， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


网 
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在 通过 链接 的 样式 表 为 这 个 文档 添加 了 一 些 基本 样式 规则 之 后 ， 初 始 的 页 面 如 图 4-1 所 示 。 





Abraham Lincoln's Gettysburg Address 














Text Size 
Default ( Bigger Smaller 





Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 














图 4-1 


有 了 这 些 代 码 之 后 ， 单 击 Bigger 和 Smaller 按 钮 ， 会 增 大 或 缩小 <div class="speech"> 中 
文本 的 字体 大 小 ， 而 单 击 Default 按 钮 ， 则 会 把 <aiv class="speech"> 中 文本 的 字体 重 置 为 初 
始 大 小 。 


4.1.1 设置 计算 的 样式 属性 值 


如 果 每 次 都 增 大 或 减 小 为 预定 的 值 ， 那 么 仍然 可 以 使 用 .adqdaclass () 方 法 。 但 是 ， 这 次 假 
设 我 们 希望 每 单 击 一 次 按钮 , 文本 的 字体 大 小 就 会 持续 地 递增 或 递减 。 虽 然 为 每 次 单 击 定义 一 个 
单独 的 类 ， 然 后 迭代 这 些 类 也 是 可 能 的 ， 但 更 简单 明了 的 方法 是 每 次 都 以 当前 字体 大 小 为 基础 ， 
按照 一 个 设 定 的 系数 〈 例 如 40% ) 来 递增 字体 大 小 。 

同 以 前 一 样 ， 我 们 的 代码 仍然 是 从 $ (document) .reaqy() 和 $('#switcher-large') .click() 
事件 处 理 程 序 开 始 ， 参 见 代 码 清单 4-1。 


代码 清单 4-1 


$s(document) .ready (function() { 
$('#switcher-large') .click(function() { 
二 

})3 


接着 ,通过 $ ('div.speech').css('fontSize') 可 以 轻而易举 地 取得 当前 的 字体 大 小 。 
不 过 ， 由 于 返回 的 值 中 包含 数字 值 及 其 单位 (px )， 需 要 去 掉 单 位 部 分 才能 执行 计算 。 同 样 ， 在 
需要 多 次 使 用 某 个 jQuery 对 象 时 ， 最 好 也 把 这 个 对 象 保存 到 一 个 变量 中 ， 从 而 达到 缓存 数据 的 目 
的 。 为 此 ， 就 需要 引入 两 个 变量 ， 参 见 代 码 清 单 4-2。 


代码 清单 4-2 


s(dqocument) .ready (function() { 
Var $speech = $('div.speech'); 
$('#switcher-large') .click(function() { 
Var num = parseFloat ($speech.css('fontSize')); 
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$ (document) .ready () 中 的 第 一 行 代码 把 <aiv class="speech"> 保 存 到 一 个 变量 中 。 注 
意 变量 名 $speech 中 的 $。 由 于 $ 是 JavaScript 变 量 中 合法 的 字符 ， 因 此 可 以 利用 它 来 提醒 自己 该 
变量 中 保存 着 一 个 jQuery 对 象 。 与 PHP 等 编程 语言 不 同 , $ 符 号 在 jQuery 或 者 说 JavaScript 中 没有 特 
殊 的 含义 。 

在 .click 处 理 程 序 中 ， 通 过 parseFloat () 困 数 只 取得 字体 大 小 属性 中 的 数值 部 分 。 
parseFloat () 图 数 会 在 一 个 字符 串 中 从 左 到 右 地 查找 一 个 序 点 〈 十 进 制 ) 数 。 例 如 ， 它 会 将 字 
符 串 '12' 转 换 成 数字 12。 男 外 ， 它 还 会 去 掉 末 尾 的 非 数 字 字 符 ， 因 此 '12px' 就 变 成 了 12。 如 果 
字符 串 本 身 以 一 个 非 数 字 开 头 ， 那 么 parseFloat () 会 返回 NaN， 即 Nota Number ( 非 数字 )。 

至 此 ,所 剩 的 就 是 修改 解析 后 的 数值 并 根据 新 值 来 重 设 字 号 大 小 了 。 在 这 个 例子 中 , 我 们 要 
在 每 次 按钮 被 单 击 时 把 字号 增 大 40%。 为 此 ， 可 以 将 num 乘 以 1.4， 然 后 再 连接 num 和 'px' 来 设置 
字体 大 小 ， 参 见 代码 清单 4-3。 


代码 清单 4-3 


$s(document) .ready (function() { 
Var $speech = $('div.speech'); 
$('#switcher-large') .click(function() { 
Var num = parseFloat ($speech.css('fontSize')); 
mm *e 1 :43 
$sspeech.css('fontSize', num + 'px'); 
局 县: 
六 


现在 ， 当 用 户 单 击 Bigger 按 钮 时 ， 文 本 会 变 大 ， 再 次 单 击 ， 会 继续 变 大 ， 如 图 4-2 所 示 。 
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Fourscore and seven years ago our fathers brought forth on this 
continent a new nation, conceived in liberty, and dedicated to the 
proposition that all men are created equal. 














图 4-2 


要 通过 单 击 Smaller 按 钮 减 小 字体 大 小 ， 应 该 使 用 除法 而 不 是 乘法 ， 即 num /= 1.4。 同 样 ， 
更 好 的 方案 是 把 对 这 两 个 按钮 的 单 击 操作 ， 通 过 <aiv id="switcher"> 中 的 <putton> 元 素 组 
合 到 一 个 .click() 处 理 程 序 中 。 在 查找 到 数值 后 ， 再 根据 用 户 单 击 的 按钮 ID 来 决定 使 用 乘法 还 
是 除法 ， 如 代码 清单 4-4。 


代码 清单 4-4 


$s(document) .ready (function() { 
Var $speech = $('div.speech'); 
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$('#switcher button') .click(function() { 
Var num = parseFloat ($speech.css('fontSize')); 


if (this.id== 'switcher-large') { 
Wm = 1 
} else if (this.id== 'switcher-small') { 


num /= 1.4; 
} 
$sspeech.css('fontSize', num + 'px'); 
> 
1)3 


根据 第 3 章 学 习 的 内 容 ， 我 们 知道 可 以 访问 由 this 引 用 的 DOM 元 素 的 ia 属性 ， 因 而 就 有 了 
if 和 else if 语句 中 的 代码 。 这 里 ， 如 果 仅 测试 属性 的 值 ， 使 用 his 显 然 要 比 创建 jQuery 对 象 更 
有 效 。 

如 果 提 供 一 种 方式 能 够 返回 字体 大 小 的 初始 值 当然 更 好 了 。 为 了 做 到 这 一 点 ， 可 以 在 DOM 
就 绪 后 立即 把 字体 大 小 保存 在 一 个 变量 中 。 然 后 ， 当 用 户 单 击 Default 按 钮 时 ,再 使 用 这 个 变量 
的 值 。 虽 然 可 以 通过 再 添加 一 个 else if 语 句 来 处 理 这 次 单 击 ， 但 此 时 改 用 switch 语 句 应 该 更 
合适 ， 参 见 代码 清单 4-5。 


代码 清单 4-5 


s(dqocument) .ready (function() { 
Var $speech = $('div.speech'); 
var defaultSize = $speech.css('fontSize'); 
$('#switcher button') .click(function() { 
Var num = parseFloat ($speech.css('fontSize')); 
Switch (this.id) { 
case 'switcher-large': 
Wm *= 14; 
break; 
case 'switcher-small': 
num /= 1.4; 
break; 
default: 
num = parseFloat (defaultSize); 
































} 
$sspeech.css('fontSize', num + 'px'); 
} 
}); 


在 此 ， 仍 然 是 检查 this .id 的 值 并 据 以 改变 字体 大 小 ， 但 如 果 它 的 值 既 不 是 ' switcher- 
large' 也 不 是 'switcher-small' ， 那 么 就 应 该 使 用 默认 的 初始 字体 大 小 。 


4.1.2 ” 带 厂 商 前 缀 的 样式 属性 


浏览 絮 厂 商 在 引入 试验 性 的 样式 属性 时 ,通常 会 在 实现 达到 CSS 规 范 要 求 之 前 ,在 属性 名 前 
面 添加 一 个 前 缀 。 等 到 实现 和 规范 都 稳定 之 后 ,这 些 属 性 的 前 有 强 就 会 被 去 控 ， 让 开发 人 员 使 用 标 
准 的 名 称 。 因 此 ， 我 们 经 常会 在 样式 表 里 看 到 一 些 类 似 下 面 这 样 的 CSS 声 明 : 


























网 


灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 





66 第 4 章 样式 与 动画 





-webkit-property-name: value; 
-moz-property-name: value; 
-ms-property-name: value; 
-0o-property-name: value; 
property-name: value; 


如 果 想 在 JavaScript 中 设置 这 些 属 性 ， 需 要 提前 检测 它们 在 DOM 中 是 否 存 在 ， 从 
bropertName 到 WebkitPropertyName， 再 到 msPropertyName We 都 要 检测 。 但 在 jQuery 中 S 
我 们 可 以 直接 使 用 标准 的 属性 名 ， 比 如 : .css('propertyName'，'value')。 如 果 样 式 对 象 
中 不 存在 这 个 属性 ，jQuery 就 会 依次 检测 所 有 带 前 级 (webkit、0、Moz 、ms ) 的 属性 ， 然 后 使 
用 第 一 个 找到 的 那个 属性 。 


4.2 ”隐藏 和 显示 元 素 


基本 的 .hide() 和 .show() 方 法 不 带 任 何 参 数 。 可 以 把 它们 想象 成 类 似 .css ('display'， 
'string') 方 法 的 简写 方式 ， 其 中 string 是 适当 的 显示 值 。 不错 ， 这 两 个 方法 的 作用 就 是 立即 
隐藏 或 显示 匹配 的 元 素 集合 ， 不 带 任何 动画 效果 。 

其 中 ，.hiae () 方 法 会 将 匹配 的 元 素 集合 的 内 联 style 属 性 设置 为 aisplay:none。 但 它 的 
聪明 之 处 是 ， 它 能 够 在 把 aisplay 的 值 变 成 none 之 前 ， 记 住 原先 的 aisplay 值 ， 通 常 是 block、 
inline 或 inline-block。 人 恰好 相反 ，.show() 方 法 会 将 匹配 的 元 素 集合 的 display 属性 ， 恢 
复 为 应 用 daisplay: none 之 前 的 可 见 属性 。 






















































































关于 display 属 性 
汪 要 了 解 有 关 display 属 性 及 其 不 同 的 值 在 网 页 中 的 视觉 表现 , 请 访问 Mozilla 
Developer Center 的 相关 页 面 ， 网 址 为 https://developer.mozilla.org/en/CSS/display/， 
或 到 https://developer.mozilla.org/samples/cssref/display.html 查 看 相关 示例 。 


.show() 和 .higde() 的 这 种 特性 , 使 得 它们 非常 适合 隐藏 那些 默认 的 aisplay 属 性 在 样式 表 
中 被 修改 的 元 素 。 例 如 ， 在 默认 情况 下 ，<1i> 元 素 具有 display:1ist-item 属 性 。 但 是 , 为 了 
构建 水 平 的 导航 菜单 ， 它 们 可 能 会 被 修改 成 display :inline。 而 在 类 似 这 样 的 <1i> 元 素 上 面 
使 用 .show() 方 法 ,不 会 简单 地 把 它 重 置 为 默认 的 display:1ist-item， 因 为 那样 会 把 <1i> 
元 素 放 到 单独 的 一 行 中 ; 相反 ， .show () 方 法 会 把 它 恢复 为 先前 的 display:inline 状 态 ， 从 而 
维持 水 平 的 菜单 设计 。 

要 示范 这 两 个 方法 ， 最 明显 的 例子 就 是 在 前 面 的 HTML 中 再 添加 一 个 新 段落 ， 然 后 在 第 一 个 
段落 末尾 加 上 一 个 read more 链 接 : 


<div class="speech"> 
<p>Fourscore and seven years ago our fathers brought forth 
on this continent a new nation, conceived in liberty, 
and dedicated to the proposition that all men are 
created equal. 
</{p> 
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<p>Now we are engaged in a great civil war, testing whether 
that nation, or any nation so conceived and so dedicated, 
can long endure. We are met on a great battlefield of 
that war. We have come to dedicate a portion of that 
field as a final resting-place for those who here gave 
their lives that the nation might live. It is altogether 
fitting and proper that we should do this. But, in a 
larger sense, we cannot dedicate, we cannot consecrate, 
we cannot hallow, this ground. 

</p> 

<a href="#" class="more">read more</a> 


ws 
当 DOM 就 绪 时 ， 选 择 一 个 元 素 并 调用 .nide() 方 法 ， 参见 代码 清单 4-6。 
代码 清单 4-6 


$s (document) .ready (function() { 
$('p').eq(1) .hige(); 
了 于) 


这 里 的 .ed () 方 法 与 第 2? 章 中 讨论 的 :eq() 伪 类 相似 。 这 个 方法 返回 jQuery 对 象 , 其 中 包含 一 
个 元 素 (索引 从 0 开始 )。 在 这 个 例子 中 ，. ea () 方 法 选择 第 二 个 段落 并 隐藏 该 段落 ， 结 果 看 起 来 
如 图 4-3 所 示 。 
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Fourscore and seven Years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 











read more 








The brave men, living and dead, who struggled here have consecrated it, far above our poor power 





4-3 


然后 ， 当 用 户 单 击 第 一 段 未 尾 read more 链 接 时 ， 就 会 隐藏 该 链接 同时 显示 第 二 个 段落 ,参见 
代码 清单 4-7。 


代码 清单 4-7 


$s (document) .ready (function() { 
$('p').eq(1) .hide(); 
$s('a.more') .click(function(event) { 
event .preventDefault(); 
$('p').eq(1) .show!(); 
$s (this) .hide(); 
了 
上 





图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 





68 ”第 4 章 样式 与 动画 








注意 ， 这 里 使 用 了 .preventDefault () 来 避免 链接 的 默认 操作 ， 此 时 的 讲话 文本 如 网 4-4 


所 示 。 
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Now we are engaged in a great civil war, 





Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 


so dedicated, can long endure. We are met on a great battlefield of that war. We have come to 
dedicate a portion of that field as a final resting-place for those who here gave their lives that the 
nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we 
cannot dedicate, we cannot consecrate, we cannot hallow, this ground. 


The brave men, living and dead, who struggled here have consecrated it, far above our poor power 


testing whether that nation, or any nation so conceived and 











图 4-4 


虽然 .hide () 和 .show() 方 法 简单 实用 , 但 它们 没有 那么 花哨 。 为 了 增添 更 多 的 艺术 感 , 我 


们 可 以 为 它们 指定 速度 。 


4.3 效果 和 时 长 


当 在 .show() 或 .hide() 中 指定 时 长 〈 或 更 准确 地 说 ， 一 个 速度 ) 参数 时 ， 就 会 产生 动画 效 





果 ， 即 效果 会 在 一 个 特定 的 时 间 段 内 发 生 。 
高 度 、 宽 度 和 不 透明 度 ， 直 至 这 3 个 属 怕 


display:none。 而 .show(' duration 








例如 .hide('qduration') 方 法 , 会 同时 减少 元 素 的 
的 值 都 达到 0， 与 此 同时 会 为 该 元 素 应 用 CSS 规 则 
') 方 法 则 会 从 上 到 下 增 大 元 素 的 高 度 ， 从 左 到 右 增 大 








元 素 的 宽度 ， 同 时 从 0 到 1 增加 元 素 的 不 透明 度 ， 直 至 其 内 容 完全 可 见 。 


4.3.1 指定 显示 速度 











对 于 jQuery 提供 的 任何 效果 ， 都 可 以 指定 两 种 预 设 的 速度 参数 : 'slow' 和 'fast'。 使 
用 .show('slow' ) 会 在 600 上 毫秒 (0.6 秒 ) 内 完成 效果 , 而 .show('fast') 则 是 200 毫 秒 (0.2 秒 )。 
如 果 传 人 的 是 其 他 字符 串 ，jQuery 就 会 在 默认 的 400 毫 秒 内 完成 效果 。 要 指定 更 精确 的 速度 ， 可 


以 使 用 毫秒 数值 ， 例 如 . show(850) 。 注 意 ， 与 字符 串 表 示 的 速度 参数 名 称 不 同 ， 数 值 不 需要 使 


用 引号 。 











下 面 ,， 我 们 就 为 《林肯 盖 提 斯 堡 演 说 秤 》( Lincoln’s Gettysbure Address ) 的 第 2 段 指 定 显 示 速 


度 ， 如 代码 清单 4-8 所 示 。 
代码 清单 4-8 


$ (document) .ready (function() { 
s('p').eq(1) .hide(); 
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$s('a.more') .click(function(event) { 
event .preventDefault(); 
$('p').eq(1) .show('slow'); 

$s (this) .hide(); 

六 

了 


当 我 们 在 效果 完成 大 约 一 半 时 捕获 段落 的 外 观 时 ， 会 看 到 类 似 图 4-5 所 示 的 结果 。 
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Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 


Now we are engaged in a great civil war, testing whether 
that nation, or any nation so conceived and so dedicated, 
can long endure. We are met on a great battlefield of that 


The brave men, living and dead, who struggled here have consecrated it, far above our poor power 
to add or detract. The world will little note, nor long remember, what we say here, but it can never 
forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work 
which they who fought here have thus far so nobly advanced. 











图 4-5 


4.3.2 ” 淡 入 和 淡出 


虽然 使 用 . show() 和 .hiae () 方 法 在 某 种 程度 上 可 以 创造 漂亮 的 效果 , 但 其 效果 有 时 候 也 可 
能 会 显得 过 于 花哨 。 考 虑 到 这 一 点 ,jQuery 也 提供 了 两 个 更 为 精细 的 内 置 动画 方法 。 如 果 想 在 显 
示 整 个 段落 时 ， 只 是 逐渐 地 增 大 其 不 透明 度 ， 那么 可 以 使 用 . fadeIn('slow') 方 法 ， 参 见 代 码 
清单 4-9。 


代码 清单 4-9 


$s(document) .ready (function() { 
$('p').eq(1) .hide(); 
$s('a.more') .click(function(event) { 











event .preventDefault(); 
$('p').eq(1) .fadeIn('slow'); 
$s (this) .hide(); 
}); 
}) 


这 一 次 如 果 捕 获 到 段落 显示 到 一 半 时 的 外 观 ， 则 会 变 成 如 图 4-6 所 示 的 效果 。 
最 近 两 次 效果 的 差别 在 于 ，. fadeIn () 会 在 一 开始 设置 段落 的 尺寸, 以 便 内 容 能 够 逐渐 显示 
出 来 。 类 似 地 ， 要 逐渐 减少 不 透明 度 ， 可 以 使 用 .fadeout () 。 
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Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 


The brave men, living and dead, who struggled here have consecrated it, far above OUr poor power 
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图 4-6 
4.3.3 滑 上 和 滑 下 


对 于 本 来 就 处 于 文档 流 之 外 的 元 素 ， 比 较 适 合 使 用 淡 入 和 淡出 动画 。 例如 ,对 于 那些 覆盖 在 
页 面 之 上 的 “ 亮 盒 ”元 素来 说 , 采用 淡 入 和 淡出 就 显得 很 自然 。 不 过 ,假如 某 个 元 素 本 来 就 处 在 
文档 流 中 ， 那 再 调用 .fadeIn () 就 会 导致 文档 “ 跳 一 下 ”， 以 便 为 新 元 素 腾 出 地 方 来 。 但 这 种 跳 
跃 感 在 用 户 眼 里 就 不 总 是 那么 美观 了 。 

此 时 , 使 用 jQuery 的 .slideDown() 和 .slideUp () 方 法 通常 是 正确 的 选择 。 这 两 个 动画 方法 
仅 改 变 元 素 的 高 度 。 要 让 段落 以 垂直 滑 和 人 的 效果 出 现 ， 可 以 像 代 码 清 单 410 这 样 调 


用 .sligdeDown('slow')。 


代码 清单 4-10 


$s(document) .ready (function() { 
$('p').eq(1) .hide(); 
$s('a.more') .click(function(event) { 
event .preventDefault(); 
s('p').eq(1) .slideDown('slow'); 
s(this) .hide(); 
过 
3 


处 在 动画 过 程 当 中 的 段落 如 图 4-7 所 示 。 















































Abraham Lincoln's Gettysburg Address 





Text Size 
(Default » (Bigger ) (smaller ) 

















Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 


Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and 
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要 实现 相反 的 动画 效果 ， 应 该 调用 .slideUp () 。 


4.3.4 切换 可 见 性 


有 时 候 , 我 们 需要 切换 某 些 元 素 的 可 见 性 ， 而 不 像 前 面 例子 中 那样 只 把 它们 显示 出 来 。 要 实 
现 切换 ， 可 以 先 检 查 匹 配 元 素 的 可 见 性 ， 然 后 再 添加 适当 的 方法 。 在 此 ,仍然 以 淡 入 淡出 效果 为 
例 ， 可 以 把 示例 脚本 修改 为 如 代码 清单 4-11 所 示 。 


代码 清单 4-11 


s(dqocument) .ready (function() { 
Var SfirstPara = $('p').eq(1); 
sfirstPara.hide(); 
$s('a.more') .click(function(event) { 
event .preventDefault(); 
if ($firstPara.is(':hidden')) { 
$sfirstPara.fadeIn('slow'); 
$s (this) .text('read less'); 
} else { 
$sfirstPara.fadeOut('slow'); 
$s (this) .text('read more'); 














六 
})3 


与 我 们 在 本 章 前 面 所 做 的 一 样 ， 首 先 缓存 选择 符 以 避免 重复 遍历 DOM。 而 且 ， 这 里 也 不 再 
隐藏 被 单 击 的 链接 ， 而 是 修改 它 的 文本 。 








>» 为 检测 和 修改 元 素 中 包含 的 文本 ， 这 里 使 用 了 .text () 方法。 第 5 章 在 介绍 
Q DOM 操 作 时 还 将 进一步 讨论 这 个 方法 。 





























使 用 if else 语 句 切 换 元 素 的 可 见 性 是 非常 自然 的 方式 。 但 通过 jQuery 复合 效果 方法 ， 却 不 
一 定 非 要 使 用 这 个 条 件 语句 ( 尽管 在 这 个 例子 中 ， 需 要 条 件 语 句 来 修改 链接 的 文本 )。jQuery 提 
共 了 一 个 .toggle() 方 法 ,该 方法 的 作用 类 似 于 .show() 和 .hide() 方 法 ,而 且 与 它们 一 样 的 
是 ，.toggle() 方 法 时 长 参数 也 是 可 选 的 。 另 一 个 复合 方法 是 .slideToggle ()， 该 方法 通过 
逐渐 增加 或 减少 元 素 高 度 来 显示 或 隐藏 元 素 。 代 码 清单 4-12 是 使 用 .slideToggle() 方 法 的 
脚本 。 


代码 清单 4-12 


s(dqocument) .ready (function() { 
Var S$firstPara = $('p').eq(1); 
sfirstPara.hide(); 
$s('a.more') .click(function(event) { 
event .preventDefault(); 
sfirstPara.slideToggle('slow'); 
var Slink = S${(this):; 
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if ($link.text() == 'read more') { 
$link.text('read less'); 
} else { 


$link.text('read more'); 


让 
基肥 


为 不 重复 $ (this) ， 我 们 把 它 保 存在 了 $1ink 变 量 中 。 同 样 ， 条 件 语句 检查 的 是 链接 的 文本 
而 非 第 二 个 段落 的 可 见 性 ， 因 为 我 们 只 利用 它 来 修改 文本 。 


4.4 创建 自 定 义 动画 


除了 预 置 的 效果 方法 外 ，jQuery 还 提供 了 一 个 强大 的 .animate () 方 法 ， 用 于 创建 控制 更 加 
精细 的 自 定义 动画 。.animate() 方 法 有 两 种 形式 ,第 一 种 形式 接收 以 下 4 个 参数 。 
口 一 个 包含 样式 属性 及 值 的 对 象 : 与 本 章 前 面 讨 论 的 .css () 方 法 中 的 参数 类 似 。 
口 可 选 的 时 长 参数 : 既 可 以 是 预 置 的 字符 串 ， 也 可 以 是 毫秒 数值 。 
口 可 选 的 缓 动 (easing ) 类 型 : 现在 我 们 先 不 介绍 ， 这 是 第 11 章 中 将 要 讨论 的 一 个 高 级 选项 。 
口 可 选 的 回调 函数 : 将 在 本 音 后 面 讨论 。 
把 这 4 个 参数 放 到 一 起 ， 结 果 如 下 所 示 : 
.animate({propertyl: 'valuel', property2: 'value2'}, 
duration, easing, function() { 
alert('The animation is finished.'); 


} 
3 


第 二 种 形式 接受 两 个 参数 ， 一 个 属性 对 象 和 一 个 选项 对 象 : 

.animate({properties}, {options}) 

实际 上 , 这 里 的 第 二 个 参数 是 把 第 一 种 形式 的 第 2 ~ 4 个 参数 封装 在 了 另 一 个 对 象 中 , 同时 又 
添加 了 两 个 选项 。 考 虑 到 可 读 性 并 调整 了 换行 之 后 ， 调 用 第 二 种 形式 的 方法 的 代码 如 下 : 


.animate({ 
propertyl: 'valuel', 
property2: 'value2' 
J 
duration: 'value', 
easing: 'value', 
specialEasing: { 
propertyl: 'easingl', 
property2: 'easing2' 






















































































js 
complete: function() { 

alert('The animation is finished.'); 
入 
queue: true, 
step: callback 
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现在 ,我 们 使 用 第 一 种 形式 的 .animate() 方 法 ,但 在 本 章 后 面 介绍 排队 效果 时 会 使 用 其 第 
二 种 形式 。 





4.4.1 手工 创建 效果 


现在 , 我 们 已 经 介绍 了 几 个 用 于 显示 和 隐藏 元 素 的 预定 义 方法 ,为 了 讨论 .animate () 方 法 ， 
有 必要 看 一 看 怎么 通过 这 个 低级 接口 来 实现 与 调用 .slideroggle () 相 同 的 效果 。 在 此 ， 我 们 把 
前 面 例子 中 调用 .slidqeroggle () 方 法 的 代码 蔡 换 成 了 自 定义 动画 代码 ， 参 见 代 码 清单 4-13。 





代码 清单 4-13 


s(dqocument) .ready (function() { 
Var SfirstPara = $('p').eq(1); 
sfirstPara.hide(); 
$s('a.more') .click(function(event) { 
event .preventDefault(); 
sfirstPara.animate({height: 'toggle'}, 'slow'); 
Var Sl1ink. =, S(this)y 





if ($link.text() == 'read more') { 
$slink.text('read less'); 
} else { 


Slink.text('read more'); 
} 
})s 


}) 3 
>» 这 对 于 .slideToggle() 来 说 并 不 是 一 个 非常 恰当 的 例子 。 该 方法 实际 也 可 
QI 以 对 元 素 的 内 外 边 距 加 以 变换 。 


通过 这 个 例子 可 以 看 出 ，.animate () 方 法 针对 CSS 属 性 提供 了 方便 简写 值 : 'show' 、'hige' 
和 'toggle', 以 便 在 简写 方法 不 适用 时 提供 另 一 种 简化 . slideroggle () 等 内 置 效 果 方 法 的 方式 。 
4.4.2 一 次 给 多 个 属性 添加 动画 效果 


使 用 .animate() 方 法 可 以 同时 修改 多 个 CSS 属 性 。 例 如 ， 要 在 切换 第 二 个 段落 时 ， 创 建 一 
个 同时 具有 滑动 和 淡 入 淡出 效果 的 动画 ， 只 需 在 .animate() 方 法 的 属性 对 象 参 数 中 添加 一 个 
height 属 性 值 - 对 即 可 ， 参见 代码 清单 4-14。 




















代码 清单 4-14 


$s (document) .ready (function() { 
Var SfirstPara = $('p').eq(1); 
sfirstPara.hide(); 
$s('a.more') .click(function(event) { 
event .preventDefault (); 
sfirstPara.animatel({ 
opacity: 'toggle', 
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height: 'toggle' 


} TSLOW )S 

Var Slink = $ (this); 

if ($link.text() == 'read more') { 
$slink.text('read less'); 

} else { 


$slink.text('read more'); 


的 乏 

此 外 ， 不 仅 可 以 在 简写 效果 方法 中 使 用 样式 属性 ， 也 可 以 使 用 其 他 CSS 属 性 ， 如 : left、 
top、fontSize、margin、padding 和 borderwidth。 还 记得 改变 演讲 段落 文本 大 小 的 脚本 
吗 ? 要 实现 同样 的 文本 大 小 变化 动画 ， 只 要 把 .css () 方 法 替换 成 .animate() 方 法 即 可 ， 人 参见 
代码 清单 4-15。 


代码 清单 4-15 


$s(document) .ready (function() { 
Var $speech = $('div.speech'); 
var defaultSize = $speech.css('fontSize'); 
$('#switcher button') .click(function() { 
Var num = parseFloat ($speech.css('fontSize')); 
Switch (this.id) { 
case 'switcher-large': 
ii 
break; 
case 'switcher-small': 
num /= 1.4; 
break; 
default: 
num = parseFloat (defaultSize); 














} 


$sspeech.animate({fontSize: num + 'px'}, 'slow'); 
js 
基肥 


再 使 用 其 他 属性 , 则 可 以 创造 出 更 复杂 的 效果 。 例 如 , 可 以 在 把 某 个 项 从 页 面 左 侧 移动 到 右 
侧 的 同时 ， 让 该 项 的 高 度 增 加 20 像 素 并 使 其 边框 宽度 增加 到 5 像素 。 下 面 ， 我 们 就 把 这 个 效果 应 
用 于 <div idq="switcher"> 盒 子 。 图 4-8 显 示 了 应 用 效果 之 前 的 画面 。 














Abraham Lincoln's Gettysburg Address 





Text Size 
(Defaukt ) (Bigger ) (Smaller ) 

















Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 











图 4-8 
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在 可 变 宽度 的 布局 中 , 需要 计算 盒子 在 与 页 面 右 侧 对 齐 之 前 应 该 移动 的 距离 。 假 设 段落 宽度 
为 100%， 可 以 从 段落 宽度 中 减 去 Text Size 盒 子 的 宽度 。 我 们 使 用 jQuery 的 .outwiath () 方 法 来 
计算 宽度 ， 包 括 内 边 距 及 边框 宽度 。 我 们 还 使 用 这 个 方法 计算 转换 器 新 的 left 属 性 。 对 于 这 个 
例子 而 言 ， 我 们 打算 通过 单 击 按钮 上 面 的 Text Size 文 本 来 触发 动画 ， 参 见 代码 清单 4-16。 


代码 清单 4-16 


s(dqocument) .ready (function() { 
$s('div.label') .click(function() { 
var paraWidth = $('div.speech p') .outerWidth(); 
Var S$Sswitcher = $(this) .parent(); 
Var switcherWidth = $switcher.outerWidth(); 
Sswitcher .animate({ 
borderWidth: '5Px'， 
left: paraWidth - switcherWwidth, 
height: '+=20px' 
jy», BLOw.). 
) 
})3 


在 此 ， 有 必要 详细 解释 一 下 这 些 动 画 属性 。 首 先 ，borderwidth 属 性 很 明显 ， 只 要 给 它 指 
定 一 个 常量 值 加 一 个 单位 即 可 ， 就 像 在 样式 表 中 一 样 。 其 次 ，left 属 性 是 计算 的 数值 。 这 些 属 
性 值 的 单位 后 绥 是 可 选 的 ， 如 果 不 指定 ， 就 会 默认 以 px 作为 单位 。 最 后 ，height 属 性 使 用 我 们 
以 前 没有 遇 到 过 的 语法 , 其 中 属性 值 前 面 的 += 操 作 符 表 示 相 对 值 。 在 这 里 表示 的 意思 不 是 以 动画 
方式 变化 到 20 像 素 ， 而 是 在 原来 基础 上 再 以 动画 方式 变化 20 像 素 。 因 为 涉及 特殊 字符 问题 ， 所 以 
必须 以 字符 串 形 式 指定 相对 值 ， 也 就 是 说 必须 把 值 放 到 一 对 括号 内 。 

此 时 的 代码 虽然 能 够 增加 相应 <aiv> 的 高 度 , 并 加 宽 其 边框 ,但 还 不 能 改变 其 left 位 置 属性 。 
此 时 外 观 如 图 4-9 所 示 。 


















































Abraham Lincoln's Gettysburg Address 


Text Size 





( Default Bigger ) (Smaller 





Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 














图 4-9 


最 终 ， 还 是 需要 通过 修改 CSS 来 支持 对 位 置 属性 的 修改 。 

通过 CSS 定 位 

在 使 用 .animate () 方 法 时 ， 必 须 明确 CSS 对 我 们 要 改变 的 元 素 所 施加 的 限制 。 例 如 ， 在 元 
素 的 CSS 定 位 没有 设置 成 relative 或 absolute 的 情况 下 ， 调 整 1eft 属 性 对 于 匹配 的 元 素 训 无 
作用 。 所 有 块 级 元 素 默 认 的 CSS 定 位 属性 都 是 static， 这 个 值 精确 地 表明 : 在 改变 元 素 的 定位 
属性 之 前 试图 移动 它们 ， 它 们 只 会 保持 静止 不 动 。 
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要 了 解 与 绝对 ( absolute ) 和 相对 (relative ) 定位 有 关 的 更 多 信息 ,请 参考 Joe 
& Gillespie 的 文章 “Absolutely Relative” ( http:/www.wpdfd.conyissues/78/absolutely 
relative/ )。 


打开 样式 表 ， 我 们 注意 到 其 中 已 经 为 <div id="switcher"> 容 器 和 个 别 的 按钮 设置 了 相对 
的 定位 : 
#switcher { 
position: relative; 


》 


不 过 ， 我 们 要 演示 的 还 是 使 用 JavaScript 来 根据 需要 修改 这 个 属性 ， 以 便 了 解 jQuery 的 功能 ， 
参见 代码 清单 4-17。 














代码 清单 4-17 


$s(document) .ready (function() { 
$s('div.label') .click(function() { 
Var paraWidth = $('div.speech p') .outerWidth(); 
Var $switcher = $(this) .parent(); 
Var switcherWidth = $switcher.outerWidth(); 
SSswitcher.css({ 
position: 'relative' 
}) .animate({ 
borderWidth: 'S5px', 
left: paraWidth - switcherWwidth, 
height: '+=20px' 
}, 'slow'); 
让 
用 


在 有 了 CSS 的 定位 支持 之 后 ， 单 击 Text Size， 最 终 完成 的 效果 将 如 图 4-10 所 示 。 
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Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 











图 4-10 


4.5 并 发 与 排队 效果 


通过 刚才 的 例子 ， 可 以 看 出 .animate () 方 法 在 为 一 组 特定 的 元 素 创建 并 发 效果 时 非常 有 
用 。 然 而 ， 有 的 时 候 我 们 需要 的 则 是 排队 效果 ， 即 让 效果 一 个 接 一 个 地 发 生 。 
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4.5.1 ”处理 一 组 元 素 


当 为 同一 组 元 素 应 用 多 重 效果 时 , 可 以 通过 连 级 这 些 效果 轻易 地 实现 排队 。 为 了 示范 排队 效 
果 ， 我 们 仍 以 代码 清单 4-17 为 例 ， 移 动 Text Size 盒 子 、 增 加 其 高 度 、 加 宽 其 边框 。 不 过 ， 这 次 我 
们 相继 地 执行 这 三 个 效果 一 一 很 简单 ,只 要 把 它们 分 别 放 在 .animate () 方 法 中 并 连 绥 起 来 即 可 ， 
参见 代码 清单 4-18。 


代码 清单 4-18 


$s (document) .ready (function() { 
$s('div.label') .click(function() { 
var paraWidth = $('div.speech p') .outerWidth(); 
Var S$Sswitcher = $(this) .parent(); 
Var switcherWidth = $switcher.outerWidth(); 
sswitcher 
.Css({position: 'relative'}) 
.animate({left: paraWidth - switcherWidth}, 'slow') 
.animate({height: '+=20px'}, 'slow') 
.animate({borderWidth: 'S5px'}, 'slow'); 
四 
了 


虽然 连 绥 允 许 我 们 把 这 两 个 .animate () 方 法 放 在 同一 行 ， 但 为 了 更 好 的 可 读 性 ， 这 里 故意 
将 它们 分 开放 在 了 各 自 的 一 行 中 。 

通过 使 用 连 缀 ， 可 以 对 其 他 任何 jQuery 效果 进行 排队 ， 而 并 不 限于 .animate() 方 法 。 比 如 
说 ， 我 们 可 以 按照 下 列 顺 序 对 <div id="switcher"> 上 的 效果 进行 排队 。 

(1) 通过 .fadeTo () 将 其 不 透明 度 减 退 为 0.5。 
(2) 通过 .animate () 将 其 移动 到 右 侧 。 
() 
p() 









































(3) 通过 .fadeTo () 将 其 渐 增 回 完全 不 透明 。 

(4) 通过 . slideUp () 隐藏 它 。 

(5) 通过 .slideDown () 再 将 其 显示 出 来 。 

我 们 所 要 做 的 ， 就 是 在 代码 中 按照 相同 的 顺序 连 级 这 些 效果 ， 如 代码 清单 4-19 所 示 。 





代码 清单 4-19 


$s (document) .ready (function() { 
$s('div.label') .click(function() { 
var paraWidth = $('div.speech p') .outerWidth(); 
Var S$Sswitcher = $(this) .parent(); 
Var switcherWidth = $switcher.outerWidth(); 
sswitcher 
.Css({position: 'relative'}) 
“fadeTo('fast’; 0.5) 
.animate({left: paraWidth - switcherWidth}, 'slow') 
.fadeTo('slow', 1.0) 
.SlideUp('slow') 
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.SlideDown('slow'); 
}); 
和 


1. 越过 队列 

不 过 , 要 是 想 在 这 个 <aiv> 不 透明 度 减 退 至 一 半 的 同时 , 把 它 移 动 到 右 侧 应 该 怎么 办 呢 ? 如 
果 两 个 动画 以 相同 速度 执行 , 则 可 以 简单 地 把 它们 组 合 到 一 个 .animate () 方 法 中 。 但 这 个 例子 
中 的 .fadeTo() 使 用 的 速度 字符 串 是 ' fast', 而 向 右 移动 的 动画 使 用 的 速度 字符 串 是 ' slow' 。 
在 这 种 情况 下 ， 第 二 种 形式 的 .animate () 方 法 又 可 以 派 上 用 场 了 ， 参 见 代 码 清单 4-20。 


代码 清单 4-20 


$s(document) .ready (function() { 
$s("div.1label').click(function() 1{ 
Var paraWidth = $('div.speech p') .outerWidth(); 
Var $switcher = $(this) .parent(); 
Var switcherWidth = $switcher.outerWidth(); 
$sswitcher 
.Css({position: 'relative'}) 
.fadeTo('fast', 0.5) 
.animatel({ 
left: paraWidth - switcherwWidth 
jst 
duratiorn; "SsLlow', 
queue: false 
}) 
.fadeTo('slow', 1.0) 
.SlideUp('slow') 
.SlideDown('slow'); 
这 
站 


第 二 个 参数 ( 即 选 项 对 象 ) 包含 了 queue 选 项 ， 
一 个 动画 同时 开始 。 

2. 手工 队列 

有 关 为 一 组 元 素 应 用 排队 效果 的 最 后 一 个 需要 注意 的 问题 , 就 是 排队 不 能 自动 应 用 到 其 他 的 
非 效 果 方 法 ， 如 .css() 。 下 面 ， 假 设 我 们 想 在 .sliqeUp () 执 行 后 但 在 .sliqdeDown () 执行 前 ， 
把 <aiv idq="switcher"> 的 背景 颜色 修改 为 红色 ， 可 以 尝试 像 代 码 清单 4-21 这 样 来 做 。 
































车 


该 选项 设置 为 false 即 可 让 当前 动画 与 前 








代码 清单 4-21 
// 未 完成 的 代码 


$s (document) .ready (function() { 
$s('div.label') .click(function() { 
Var paraWidth = $('div.speech p') .outerWidth(); 
Var $switcher = $(this) .parent (); 
Var switcherWidth = $switcher.outerWidth(); 
$sswitcher 
.css({position: 'relative'}) 


图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


4.5 并 发 与 排队 效果 79 





.fadeTo('fast', 0.5) 
.animatel(t{ 
left: paraWidth - switcherWidth 
}; 1{ 
duration: 'slow', 
aqueue: false 
}) 
.fadeTo('slow', 1.0) 
.SlideUp('slow') 
.Css({backgroundColor: '#f£f00'}) 
.slideDown('slow'); 
}); 
}93 
然而 , 即使 把 修改 背景 颜色 的 代码 放 在 连 级 序列 中 正确 的 位 置 上 , 它 也 会 在 单 击 后 立即 执行 。 


把 非 效果 方法 添加 到 队列 中 的 一 种 方式 ， 就 是 使 用 .queue () 方 法 。 代 码 清单 4-22 就 是 在 这 
个 例子 中 使 用 .aueue () 方 法 的 代码 片段 。 








代码 清单 4-22 


s(dqocument) .ready (function() { 
$s('div.label') .click(function() { 
var paraWidth = $('div.speech p') .outerWidth(); 
var S$Sswitcher = $(this) .parent(); 
Var switcherWidth = $switcher.outerWidth(); 
sswitcher 
.Css({position: 'relative'}) 
.fadeTo('fast', 0.5) 
.animate l(t{ 
left: paraWidth - switcherWidth 
a 
duration: 'slow', 
queue: false 
}) 
.fadeTo('slow', 1.0) 
.SlideUp('slow') 
.queue (function(next) { 
$switcher.css({backgroundColor: '#£00'}); 
next (); 
}) 
.slideDown('slow'); 
二 
2 
像 这 样 传递 一 个 回调 函数 ，. queue () 方 法 就 可 以 把 该 函数 添加 到 相应 元 素 的 效果 队列 中 。 


在 这 个 函数 内 部 ， 我 们 把 背景 颜色 设置 为 红色 ， 然 后 又 调用 了 next () 方 法 ， 其 返回 的 结果 将 作 
为 参数 传 给 回调 函数 。 添 加 的 这 个 next () 方 法 可 以 让 队列 在 中 断 的 地 方 再 接续 起 来 ， 然 后 再 与 
后 续 的 .slidqeDown ('slow') 连 级 在 一 起 。 如 果 在 此 不 使 用 next () 方 法 ,动画 就 会 中 断 。 




















要 了 解 有 关 .queue() 方 法 的 更 多 信息 ， 读 者 可 以 参考 http://api.jquery.com/ 


一 category/effects/。 
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在 下 面 讨论 多 组 元 素 的 效果 之 后 ， 我 们 会 介绍 另 一 种 向 队列 中 添加 非 效 果 方 法 的 方式 。 


4.5.2 ”处 理 多 组 元 素 


与 一 组 元 素 的 情况 不 同 ， 当 为 不 同 组 的 元 素 应 用 效果 时 ， 这些 效果 几乎 会 同时 发 生 。 为 了 示 
范 这 种 并 发 的 效果 ,我 们 可 以 在 向 上 滑 出 一 个 段落 时 ,向 下 滑 入 男 一 个 段落 。 首 先 ， 要 用 到 示例 
文档 中 的 如 下 三 、 四 段 文本 : 


<p>Fourscore and seven years ago our fathers brought forth 
on this continent a new nation, conceived in liberty, 
and dedicated to the proposition that all men are 
created equal.</p> 

<p>Now we are engaged in a great civil war, testing whether 
that nation, or any nation so conceived and so 
dedicated, can long endure. We are met on a great 
battlefield of that war. We have come to dedicate a 
portion of that field as a final resting-place for those 
who here gave their lives that the nation might live. It 
is altogether fitting and proper that we should do this. 
But, in a larger sense, we cannot dedicate, we cannot 
consecrate, we cannot hallow, this ground.</p> 

<a href="#" class="more'">read more</a> 

<p>The brave men, living and dead, who struggled here have 
consecrated it, far above our poor Power to add or 
detract. The world will little note, nor long remember, 
what we say here, but it can never forget what they did 
here. It is for us the living, rather, to be dedicated 
here to the unfinished work which they who fought here 
have thus far so nobly advanced.</p> 

<p>It is rather for us to be here dedicated to the great 
task remaining before us&mdash; that from these honored 
dead we take increased devotion to that cause for which 
they gave the last full measure of devotiong&mdash; that 
we here highly resolve that these dead shall not have 
died in vaing&mdash; that this nation, under God, shall 
have a new birth of freedom and that government of the 
people, by the people, for the people, shall not perish 
from the earth.</p> 


接着 ,为 了 更 清楚 地 看 到 效果 发 生 期 间 的 变化 ， 我 们 为 第 三 段 和 第 四 段 分 别 添加 1 像素 宽 的 
边框 和 灰色 的 背景 。 同 时 ， 在 DOM 就 绪 时 立即 隐藏 第 4 段 ， 参 见 代 码 清单 4-23。 


代码 清单 4-23 


$s(document) .ready (function() { 
$('p').eq(2) .css('border', 'lpx solid #333°'); 
$('p').eq(3) .css('backgroundColor', '#ccc') .hide(); 
} 


这 样 ， 示 例文 档 会 显示 开始 的 段落 ， 然 后 是 read more 链 接 和 带 边框 的 段落 ， 如 图 4-11 所 示 。 




















网 
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Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 


read more 


e brave men, living and dead, who struggled here have consecrated it, far above our poor power 
0 add or detract. The world will little note, nor long remember, what we say here, but it can never 


orget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work 
hich they who fought here have thus far so nobly advanced. 

















图 4-11 


最 后 ， 为 第 三 段 添 加 click 处 理 程序 ， 以 便 单 击 它 时 会 将 第 3 段 向 上 滑 (最 终 滑 出 视图 )， 同 
时 将 第 4 段 向 下 滑 (最 终 滑 和 人 视图 )， 参 见 代 码 清单 4-24。 


代码 清单 4-24 


s(dqocument) .ready (function() { 
$('p').eq(2) 
.Css('border', '1lpx solid #333') 
Click(function() 去 
s(this).slideUp('slow') .next().slideDown('slow'); 
}); 
'p').eq(3) .css('backgroundColor', '#ccc') .hide(); 





$( 
})3 


通过 截取 到 的 这 两 个 滑动 效果 变化 过 程 中 的 屏幕 截图 ， 如 图 4-12 所 示 ， 可 以 证 实 ， 它们 确实 
是 同时 发 生 的 。 





Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 


read more 


e brave men, living and dead, who struggled here have consecrated it, far above our poor power 


Itis rather for us to be here dedicated to the great task remaining before us 一 that from these 
honored dead we take increased devotion to that cause for which they gave the last full measure of 
devotion 一 that we here highly resolve that these dead shall not have died in vain 一 that this nation, 


和 











图 4-12 


原来 可 见 的 第 三 个 段落 ， 正 处 于 向 上 滑 到 一 半 的 状态 ; 与 此 同时 ， 原 来 隐藏 的 第 四 个 段落 ， 
正 处 于 向 下 请 到 一 半 的 状态 。 

排队 回调 函数 

为 了 对 不 同 元 素 上 的 效果 实现 排队 ， jQuery 为 每 个 效果 方法 都 提供 了 回调 函数 。 同 我 们 在 事 
件 处 理 程序 和 .queue () 方 法 中 看 到 的 一 样 , 回调 函数 就 是 作为 方法 的 参数 传递 的 一 个 普通 函数 。 
在 效果 方法 中 ， 它 们 是 方法 的 最 后 一 个 参数 。 

当 使 用 回调 函数 排队 两 个 滑动 效果 时 ,可 以 在 第 3 个 段落 滑 上 之 前 , 先 将 第 4 个 段落 滑 下 。 首 
先 ， 我 们 看 一 看 怎样 通过 回调 函数 设置 .slidqepovwmn () 方 法 ， 如 代码 清单 4-25 所 示 。 
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代码 清单 4-25 


s(dqocument) .ready (function() { 
$('p').eq(2) 
.CsSs('border', '1lpx solid #333') 
.Click(function() { 
s(this) .next().slideDown('slow', function() { 
s(this).slideUp('slow'); 
) 
上 
$('p! 
上 


不 过 ， 这 里 我 们 需要 注意 的 是 ， 必 须 搞 清楚 要 滑 上 的 到 底 是 哪个 段落 。 因 为 回调 函数 位 
于 .slidqepown () 方 法 中 ,所 以 $(this) 的 环境 已 经 发 生 了 改变 。 现 在 ，$ (this) 已 经 不 再 是 
指向 .click() 的 第 三 个 段落 了 一 一 由 于 .slideDown() 方 法 是 通过 $ (this) .next() 调 用 
的 ， 所 以 该 方法 中 的 一 切 现在 都 将 $(this) 视 为 下 一 个 同辈 元 素 ， 即 第 四 个 段落 。 因 而 ， 如 果 
在 回调 函数 中 放 入 $ (this) .slideUp('slow') ,那么 我 们 最 终 还 会 把 刚刚 显示 出 来 的 段落 给 
隐藏 起 来 。 

可 靠 地 引用 $ (this) 的 一 种 简单 方法 ， 就 是 在 .click() 方 法 内 部 把 它 保 存 到 一 个 变量 中 ， 
比如 var $ clickedItem = $(this)。 

这 样 ， 无 论 是 在 回调 函数 的 外 部 还 是 内 部 ，sclickeaiIitem 引 用 的 都 是 第 三 个 段落 。 使 用 了 
新 变量 之 后 的 代码 ， 参 见 代码 清单 4-26。 


代码 清单 4-26 


$s(document) .ready (function() { 
$('p').eq(2) 
.CSS('border', "1px Solid #333") 
.Click(function() { 
Var SclickedIitem = $ (this); 
SclickedIitem.next().slideDown('slow', function() { 
$sclickedItem.slideUp('slow'); 
学 
})3 
SS('p').eq(3) .css('backgroundColor', ‘'#ccce') .hide(); 


).eq(3) .css('backgroundColor', '#ccc') .hide(); 





















































下 
» 在 .sliaqeDown () 的 回调 函数 内 部 使 用 sclickedqItem 取 决 于 闭 包 。 我 们 将 
在 附录 A 中 详细 地 讨论 这 个 重要 但 又 不 太 好 理解 的 闭 包 。 

这 次 效果 中 途 的 屏幕 截图 如 图 4-13 所 示 ， 第 三 段 和 第 四 段 同 时 都 是 可 见 的 ， 而 且 ， 第 四 段 已 














经 完成 下 滑 ， 第 三 段 刚 要 开始 上 滑 。 

既然 讨论 了 回调 函数 , 那么 就 可 以 回 过 头 来 基于 代码 清单 4-22 解 决 在 接近 一 系列 效果 结束 时 
改变 背景 颜色 的 问题 了 。 这 次 ,我 们 不 像 前 面 那 样 使 用 .queue() 方 法 ， 而 是 使 用 回调 函数 ， 如 
代码 清单 4-27 所 示 。 








网 
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Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived 
in liberty, and dedicated to the proposition that all men are created equal. 


read more 












e brave men, living and dead, who struggled here have consecrated it, far above our poor power 
0 add or detract. The world will little note, nor long remember, what we say here, but it can never 
orget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work 
hich they who fought here have thus far so nobly advanced. 






lt is rather for us to be here dedicated to the great task remaining before us 一 that from these 
honored dead we take increased devotion to that cause for which they gave the last full measure of 
devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, 
under God, shall have a new birth of freedom and that government of the people, by the people, for 














图 4-13 


代码 清单 4-27 


$s(document) .ready (function() { 
$s('div.label') .click(function() { 
var paraWidth = $('div.speech p') .outerWidth(); 
Var SSswitcher = $ (this) .parent (); 
Var switcherWidth = $switcher.outerWidth(); 
sswitcher 
.css({position: 'relative'}) 
.fadeTo('fast', 0.5) 
.animate({ 
left: paraWidth - SwitcherNWidth 
}». 
duration: 'slow', 
queue: false 
}) 
.fadeTo('slow', 1.0) 
.SlideUp('slow', function() { 
sswitcher.css({backgroundColor: '#f£00'}); 
}) 
.SlideDown('slow'); 
于 
六 


同 前 面 一 样 ，<div iaq="switcher"> 的 背景 颜色 在 它 消 上 之 后 滑 下 之 前 ， 变 成 了 红色 。 注 
意 ， 在 使 用 交互 的 完成 回调 函数 而 不 是 .aueue () 时， 不 必 在 回调 中 调用 next () 。 


4.5.3 简单 概括 


随 着 在 应 用 效果 时 需要 考虑 的 变化 的 增多 , 要 记 住 这 些 效果 是 同时 发 生还 是 按 顺 序 发 生 会 变 
得 越 来 越 困 难 。 因 此 ， 下 面 简单 的 概括 可 能 会 对 你 有 所 帮助 。 
(1) 一 组 元 素 上 的 效果 : 
昌 当 在 一 个 .animate () 方 法 中 以 多 个 属性 的 方式 应 用 时 ， 是 同时 发 生 的 ; 
@ 当 以 方法 连 级 的 形式 应 用 时 ， 是 按 顺 序 发 生 的 ( 排队 效果 ) 一 一 除非 gsueue 选 项 值 为 


false。 
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(2) 多 组 元 素 上 的 效果 : 
a 默认 情况 下 是 同时 发 生 的 ; 
ma 当 在 男 一 个 效果 方法 或 者 在 .queue() 方 法 的 回调 函数 中 应 用 时 ， 是 按 顺 序 发 生 的 ( 排 
队 效果 )。 











4.6 小结 


通过 使 用 本 章 介绍 的 效果 方法 , 读者 应 该 能 够 通过 JavaScript 来 修改 行内 样式 属性 , 为 元 素 应 
用 预定 义 的 jQuery 效果 ， 创 建 自 定 义 动画 。 特 别 地 ， 我 们 学 习 了 使 用 .css () 或 .animate() 来 渐 
进 地 增 大 或 减 小 文本 的 大 小 , 通过 修改 多 个 属性 来 逐渐 显示 和 隐藏 页 面 元 素 。 此 外 ,还 学 习 了 通 
过 许多 方式 ， 同 时 地 或 相继 地 为 多 个 元 素 实现 动画 效果 。 

在 本 书 前 面 四 章 中 ， 所 有 例子 都 只 涉及 了 操作 硬 编码 到 页 面 的 HTIML 中 的 元 素 。 在 第 5 草 中 ， 
我 们 会 探索 直接 操作 DOM , 包括 使 用 jQuery 来 创建 新 元 素 的 方式 , 以 及 把 它们 插入 到 选择 的 DOM 
结构 中 。 












































延伸 阅读 


我 们 会 在 第 11 章 更 深入 地 探讨 动画 效果 。 要 了 解 有 关 选 择 符 与 遍历 方法 的 完整 介绍 , 请 参考 
本 书 附录 C 或 jQuery 官方 文档 : http://apijquery.com/。 











4.7 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
“挑战 ”练习 有 一 些 难度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : 
http://api.jquery.com/。 
(1) 修改 样式 表 ， 一 开始 先 隐 藏 页 面 内 容 ， 当 页 面 加 载 后 ， 慢 慢 地 淡 入 内 容 ; 
(2) 在 鼠标 悬 停 到 段落 上 面 时 ， 给 段落 应 用 黄色 背景 ; 
(3) 单 击 标题 ( <n2> ) 使 其 不 透明 度 变 为 23%， 同 时 添加 20px 的 左 外 边 距 ， 当 这 两 个 效果 完 
成 后 ， 把 讲话 文本 变 成 30% 的 不 透明 度 ; 
(4) 挑战 : 按 下 方向 键 时 ， 使 样式 转换 器 向 相应 的 方向 平滑 移动 20 像 素 ; 四 个 方向 键 的 键 码 
分 别 是 37 ( 左 )、38 (上 ) 39( 右 ) 和 40 (下 )。 
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操作 DOM 











所 谓 Web 体 验 ， 就 是 web 服务器 与 Web 浏 览 器 之 间 合 作 的 结果 。 过 去 ， 都 是 由 服务 器 生成 
HTMIL 文 档 ， 然 后 浏览 器 负责 解释 并 显示 该 文档 。 后 来 ， 正 如 我 们 所 看 到 的 ， 这 种 情况 发 生 了 变 
化 ， 我 们 可 以 用 CSS 技 术 来 动态 修改 页 面 的 外 观 。 然 而 ， 要 想 把 JavaScript 的 威力 真正 发 挥 出 来 ， 
还 得 学 会 修改 文档 本 身 。 

本 章 将 学 习 以 下 内 容 : 

口 利用 DOM 提 供 的 接口 修改 文档 ; 

口 在 网 页 中 根据 需要 创建 元 素 和 文本 ; 

口 移动 或 删除 元 素 ; 

口 通过 添加 、 删 除 或 修改 它们 的 属性 来 实现 文档 内 容 的 变换 。 


5.1 操作 属性 


在 本 书 前 4 章 里 ,我 们 经 常 使 用 .adqaclass () 和 .removeclass () 方 法 来 示范 如 何 改变 页 
面 上 元 素 的 外 观 。 虽 然 我 们 一 般 会 说 这 两 个 方法 在 操作 类 属性 , 但 jQuery 实际 上 是 在 操作 DOM 
中 的 className 属 性 。 换 名 话说，.adqqaqclass () 方 法 创建 或 增加 这 个 属性 , 而 .removeclass () 
则 删除 或 缩短 该 属性 。 而 具备 了 这 两 种 操作 的 .toggleclass () 方 法 能 够 交替 地 添加 和 移 
除 类 。 这 样 ， 我 们 就 具有 了 处 理 类 的 一 种 有 效 而 可 靠 的 方式 。 这 些 方法 特别 有 用 ， 因 为 它们 可 
以 在 某 个 类 已 经 存在 的 情况 下 不 添加 该 类 ( 例如， 不 会 出 现 <aiv class="first first"> 
的 情况 )， 也 可 以 正确 处 理 给 一 个 元 素 应 用 多 个 类 的 情况 ( 比如 <div class="first 


second"> )。 




































































5.1.1 非 类 属性 


有 了 时候， 我 们 还 需要 操作 其 他 一 些 属性 ， 比 如 ia、rel 和 title 属 性 。jQuery 为 此 也 提供 
了 .attr() 和 .revoveAttr() 方 法 。 这 些 方法 让 修改 属性 变 成 了 小 菜 一 碟 。 此 外 ， 通过 jQuery 
还 可 以 一 次 修改 多 个 属性 ， 同 我 们 在 第 4 章 中 使 用 .css () 方 法 修改 多 个 CSS 属 性 的 方式 类 似 。 

比如 ， 我 们 可 一 次 性 修改 链接 的 ia、re1 和 title 属 性 。 首 先 来 看 一 看 我 们 例子 中 的 HTML 
代码 : 
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<hl1 id="f-title">Flatland: A Romance of Many Dimensions</h1l> 
<div id="f-author">by Edwin A. Abbott</div> 
<h2>Part 1, Section 3</h2> 
<h3 id="f-subtitle"> 
Concerning the Inhabitants of Flatland 
</h3> 
<div id="excerpt">an excerpt</div> 
<div class="chapter"> 
<p class="square">Our Professional Men and Gentlemen are 
Squares (to which class I myself belong) and Five-Sided 
Figures or <a 
href="http://en.wikipedia.org/wiki/Pentagon">Pentagons 
</a>. 
</p> 
<p class="nobility hexagon">Next above these come the 
Nobility, of whom there are several degrees, beginning at 
Six-Sided Figures, or <a 
href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, 
and from thence rising in the number of their sides till 
they receive the honourable title of <a 
href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>, 
or many-Sided. Finally when the number of the sides 
becomes so numerous, and the sides themselves so small, 
that the figure cannot be distinguished from a <a 
href="http://en.wikipedia.org/wiki/Circle">circle</a>, he 
is included in the Circular or Priestly order; and this is 
the highest class of all. 
</p> 
<p><span class="pull-quote">It is a <span class="drop">Law 
of Nature</span> with us that a male child shall have 
<strong>one more side</strong> than his father</span>, so 
that each generation shall rise (as a rule) one step in 
the scale of development and nobility. Thus the son of a 
Square is a Pentagon; the son of a Pentagon, a Hexagon; 
and so on. 
</p> 
<!-- . . . Code continues . . . --> 
</div> 





下 载 代码 示例 
机 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 
Q 档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完整 的 示例 
代码 : Packt Publishing 网 站 http://www.packtpub.com/support ， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


对 于 以 上 HTML ， 我 们 可 以 循环 遍历 <dqaiv class="chapter"> 中 的 每 个 链接 ， 并 逐个 为 它 
们 添加 属性 。 如 果 只 想 为 所 有 链接 设置 一 个 公共 的 属性 值 ， 那 么 在 $ (document ) .ready 处 理 程 
序 中 通过 一 行 代码 即 可 完成 这 一 操作 ， 如 代码 清单 5-1 所 示 。 











网 
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代码 清单 5-1 


s(dqocument) .ready (function() { 
$s('div.chapter a').attr({rel: 'external'}); 


}33 

与 .css() 方 法 很 相似 ，.attr () 方 法 也 接受 一 对 参数 ,第 一 个 是 属性 名 ,第 二 个 是 属性 值 。 
不 过 ， 更 常用 的 方式 还 是 传人 一 个 包含 键 值 对 的 对 象 ， 如 代码 清单 5-1 所 示 。 使 用 对 象 可 以 轻松 
地 扩展 ， 以 便 一 次 性 地 修改 多 个 属性 ， 如 代码 清单 5-2 所 示 。 


代码 清单 5-2 


$s (document) .ready (function() { 
$s('div.chapter a') .attr({ 
rel: 'external', 
title: 'Learn more at Wikipedia' 
> 
六 


值 回 调 

如 果 我 们 想 让 每 个 匹配 的 元 素 都 具有 相同 的 一 个 或 多 个 属性 值 ， 那 么 只 要 给 .attz() 传 人 
一 个 静态 的 对 象 即 可 。 不 过 ， 更 常见 的 情况 是 为 每 个 元 素 添加 或 修改 的 属性 都 必须 具有 不 同 的 
值 。 例 如 ， 对 于 任何 给 定 的 文档 ， 如 果 要 保证 JavaScript 代 码 有 效 ， 那 么 每 个 id 属性 的 值 必须 唯 
一 。 要 为 每 个 链接 设置 唯一 的 ia， 可 以 使 用 jQuery 的 .css() 和 .each () 方 法 的 另 一 个 特性 : 值 
回调 。 

值 回 调 其 实 就 是 给 参数 传人 一 个 函数 ,而 不 是 传人 具体 的 值 。 这 个 函数 会 针对 匹配 的 元 素 集 
中 的 每 个 元 素 都 调用 一 次 , 调用 后 的 返回 值 将 作为 属性 的 值 。 例如 ， 可 以 使 用 值 回调 来 为 每 个 元 
素 生 成 唯一 的 idq 值 ， 参 见 代 码 清单 5-3 。 


代码 清单 5-3 
s(dqocument) .ready (function() { 
$s('div.chapter a') .attr({ 
rel: 'external', 
title: 'Learn more at Wikipedia', 
id: function(index, oldVvalue) { 
return 'wikilink-' + index; 



















































































了 


每 次 触发 值 回调 ， 都 会 给 它 传人 两 个 参数 。 第 一 个 是 一 个 整数 ， 表 示 和 迭代 次 数 , 我 们 在 此 利 
用 这 个 值 为 第 一 个 链接 生成 的 id 是 wikilink-0， 为 第 二 个 链接 生成 的 id 是 wikilink-1， 以 此 
类 推 。 代 码 清单 5-3 并 没有 用 到 第 二 个 参数 ， 这 个 参数 中 保存 的 是 修改 之 前 属性 的 值 。 

我 们 是 通过 title 属 性 来 邀请 人 们 学 习 维 基 百 科 中 的 术语 的 。 在 我 们 目前 为 止 使 用 的 HTML 
中 ， 所 有 链接 都 指向 维基 百科 。 不 过 ,考虑 到 其 他 链接 ,还 应 该 把 选择 符 表 达 式 定义 得 更 具体 一 
些 ， 参 见 代码 清单 5-4。 
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代码 清单 5-4 


$s (document) .ready (function() { 
$s('div.chapter a[lhref*="wikipedia"]') .attr({ 
rel: 'external', 
title: 'Learn more at Wikipedia', 
id: function(index, oldValue) { 
return 'wikilink-' + index; 


为 了 把 .attr() 方 法 的 使 用 讲 得 更 透彻 ,下面 演示 怎么 让 这 些 链接 的 title 属 性 更 具体 地 包 
含 链接 的 目标 。 同 样 ， 解 决 这 个 问题 还 是 要 使 用 值 回 调 ， 参 见 代 码 清 单 5-5。 





代码 清单 5-5 
$s(document) .ready (function() { 
$s('div.chapter al[lhref*="wikipedia"]').attr(t{ 


rel: 'external', 
title: function() { 
return 'Learn more about ' + $(this).text() 
+ ' at Wikipedia.'; 
}y 
id: function(index, oldValue) { 
return 'wikilink-' + index; 


这 一 次 我 们 利用 了 值 回调 的 上 下 文 。 就 像 在 事件 处 理 程序 中 一 样 ， 在 值 回 调 函 数 中 ，this 
关键 字 指 向 每 次 调用 回调 时 正在 操作 的 那个 DOM 元 素 ,在 此 ,我 们 把 这 个 元 素 封装 为 jQuery 对 象 ， 
这 样 就 可 通过 .text () 方 法 (第 4 章 介绍 过 ) 来 取得 链接 的 文档 内 容 了 。 结果 , 每 个 链接 的 title 
性 都 给 出 了 具体 的 提示 信息 ， 非 常 贴心 。 





机 








Flatland: A Romance of Many Dimensions 
by Edwin A. Abbott 


Part 1, Section 3 


Concerning the Inhabitants of Flatland 
an excerpt 


Our Professional Men and Gentlemen are Squares (to which class I 
myself belong) and Five-Sided Figures or Pentagons. 


Next above these come the Nobility, of wh Learn more about Pentagons at Wikipedia. 


degrees, beginning at Six-Sided Figures, or Hexagons, and from 
thence rising in the number of their sides till they receive the 


图 5-1 
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5.1.2 ”DOM 元 素 属性 


我 们 曾 在 前 面 简 单 提 到 过 , HTML 属性 与 DOM 属 性 有 一 点 区 别 。 HTML 属 性 是 指 页 页 面 标记 中 
放 在 引号 中 的 值 ， 而 DOM 属 性 则 是 指 通过 JavaScript 能 够 存 取 的 值 。 如 图 $-2 所 示 ， 通 过 Chrome 
的 开发 人 员工 具 可 以 看 到 HTML 属 性 和 DOM 属 性 值 。 


四 日 日 Developer Tools ~ http://book.dev/3145/05/ 权 


所 = | £= 
1 I{}s a 
国电 ru 本 
Elements Resources Network Sources Timeline Profiles Audits Console PageSpeed 
properties 




















了 <htmL lang="en"> vp.square 
= <head>., /ead> accessKey 
<style type="text/css"></style> align: "" 
Y<body> attributes: NamedNodeMa 
Y<div id="container"> baseURI: “http: //book. dev/3145/05/" 
<h1 id="f-title">Flatland: A Romance of Many Dimensions</h1> childElementCount: 1 
<div id="f-author">by Edwin A. Abbott</div> pb childNodes: NodeList[3] 
<h2>Part 1, Section 3</h2> .children: HTMLCollection[1] 
<h3 id="f-subtitle">Concerning the Inhabitants of bclassList: DOMTokenList 
Flatland</h3> className: "square" 
<div id="excerpt">an excerpt</div> clientHeight: 15 


clientLeft: @ 

clientTop: 9 

clientWidth: 787 
contentEditable: "inherit" 


Y<div class="chapter"> 
p<p class="square">.</p> 
p<p class="nobility hexagon">-</p> 








bp <p>..</p> 
Pp <p>-.</p> > 和 et: DOMStringMap 
P<p>.</p> draggable: false 
bb <p>.</p> bfirstChild: text 
Pp <p>.</p> bfirstElementChild: a 
Pb <p>.</p> hidden: false 
</div> id: 
器, )E QQ html body divicontainer div.chapter Ee 





5-2 


在 Chrome 开 发 人 员工 具 的 Elements 检 查 器 中 ， 可 以 清楚 地 看 到 <p> 元 素 有 一 个 名 为 class 的 
属性 ， 值 为 square。 而 在 右 侧 面板 中 ， 这 个 属性 有 一 个 对 应 的 DOM 属 性 ， 名 为 className， 值 
也 是 sauare。 这 种 HTML 属 性 与 对 应 的 DOM 属 性 名 字 不 相同 的 情况 并 不 多 ， 而 这 里 就 是 一 个 
例子 。 

大 多 数 情 况 下 , HTML 属 性 与 对 应 的 DOM 属 性 的 作用 都 是 一 样 的 , jQuery 可 以 帮 有 我 们 处 理 名 
字 不 一 致 的 问题 。 可 是 ， 有 时 候 我 们 的 确 需要 留意 这 两 种 属性 的 差异 。 某 些 DOM 属 性 ， 例 如 
nodqeName 、nodqeType、selectedqIndex 和 chilaqaNodes, 在 HTML 中 没有 对 应 的 属性 ， 因 此 通 
过 .attr() 方 法 就 没有 办 法 操作 它们 。 此 外 ,数据 类 型 方面 也 存在 差异 , 比如 HTML 中 的 checkeqd 
属性 是 一 个 字符 串 ， 而 DOM 中 的 checked 属 性 则 是 一 个 布尔 值 。 对 于 布尔 值 属性 ， 最 后 是 测试 
DOM 属 性 而 不 是 HTML 属 性 ， 以 确保 跨 浏览 器 的 一 致 行为 。 

在 jQuery 中 ， 可 以 通过 .prop () 方 法 取得 和 设置 DOM 属 性 : 

// 取 得 "checked" 属 性 的 当前 值 

Var currentlyChecked = $('.my-checkbox') .prop('checked'); 


// 设 置 "checked" 属 性 的 值 
$('.my-checkbox') .prop('checked', false); 


这 个 .prop() 方 法 与 .attr() 方 法 没有 什么 不 同 , 比如 它们 都 可 以 一 次 性 接受 一 个 包含 多 个 
值 的 对 象 ， 也 支持 值 回 调 函 数 。 
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5.1.3 ”表单 控件 的 值 


HTML 属 性 与 DOM 属 性 差别 最 大 的 地 方 , 奴 怕 就 要 数 表单 控件 的 值 了 。 比 如 , 文本 输入 框 的 
value 属 性 在 DOM 中 的 属性 叫 aefaultvalue，DOM 中 就 没有 value 属 性 。 而 选项 列表 ( select ) 
元 素 呢 ， 其 选项 的 值 在 DOM 中 通常 是 通过 selectedIinqex 属 性 ， 或 者 通过 其 选项 元 素 的 
selected 属 性 来 取得 。 

由 于 存在 这 些 差异 , 在 取得 和 设置 表单 控件 的 值 时 ,最 好 不 要 使 用 .attr () 方 法 。 而 对 于 选 
项 列表 呢 ， 最 好 连 .prop () 方 法 也 不 要 使 用 。 那 使 用 什么 呢 ， 建 议 使 用 jQuery 提供 的 .val () 
方法 : 

// 取 得 文本 输入 框 的 当前 值 

var inputValue = $('#my-input') .val(); 

// 取 得 选项 列表 的 当前 值 

var SelectValue = $('#my-select') .val(); 

/ /设置 单 选 列 表 的 值 

$s('#my-single-select') .val('value3'); 


// 设 置 多 选 列表 的 值 









































$s('#my-multi-select').val(['valuel', 'value2']); 
与 .attr() 和 .prop() 一 样 ，.val() 方 法 也 可 以 接受 一 个 函数 作为 其 setter 参 数 。 有 了 这 个 
多 用 途 的 .val () 方 法 ,使 用 jQuery 做 Web 开 发 你 又 会 倍 感 高 效 。 


5.2 DOM 树 操作 


刚才 介绍 的 .attr() 和 .prop() 方 法 都 是 在 修改 文档 时 的 得 力 工具 ,但 我 们 还 没有 涉及 怎样 
修改 DOM 文 档 的 结构 。 要 想 操作 DOM 树 本 身 ， 需 要 再 深入 了 解 一 下 jQuery 库 的 核心 函数 。 












































5.2.1 重新 认识 $() 函数 


从 本 书 开始 到 现在 , 我 们 一 直 在 使 用 $ () 函数 来 访问 文档 中 的 元 素 。 这 个 函数 就 像 一 个 工厂 ， 
它 能 够 生成 一 个 jQuery 对 象 ， 指 向 CSS 选 择 符 所 描述 的 一 组 元 素 。 

然而 ， 除 了 选择 元 素 之 外 ，$ () 函数 的 圆 括号 内 还 有 另外 一 个 玄机 一 一 这 个 强大 的 特性 使 得 
$ () 函数 不 仅 能 够 改变 页 面 的 视觉 外 观 ， 更 能 改变 页 面 中 实际 的 内 容 。 只 要 在 这 对 圆 括号 中 放 和 人 
一 组 HTML 元素， 就 能 轻而易举 地 改变 整个 DOM 结 构 。 




















关于 可 访问 性 的 提示 
V 再 次 重申 ， 无 论 什么 时 候 都 不 应 该 忘记 ， 我 们 添加 的 所 有 功能 、 视 觉 效果 
he 或 者 文本 性 的 信息 ， 只 有 在 可 以 使 用 (并 启用 了 ) JavaScript 的 Web 浏 览 器 中 才能 
正常 有 效 。 但 是 ， 重 要 的 信息 应 该 对 所 有 人 都 是 可 以 访问 的 ， 而 不 应 该 只 针对 


使 用 了 正确 的 软件 的 人 。 
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5.2.2 创建 新 元 素 


在 FAQ 页 面 中 ， 一 个 常见 的 功能 是 出 现在 每 一 对 “问题 -答案 ”后 面 的 backtotop (返回 页 面 
顶部 ) 链接 。 通 常 ， 这 些 链 接 并 没有 语义 上 的 价值 ， 因 而 可 以 合理 地 通过 JavaScript 来 生成 它们 ， 
将 它们 作为 访问 者 所 浏览 页 面 的 一 个 增强 的 子 功能 。 在 我 们 的 例子 中 , 需要 为 每 个 段落 后 面 添加 
一 个 back to top 链接 ， 而 且 ， 也 需要 添加 作为 backto top 链 接 返 回 目 标的 锚 。 首 先 ， 我 们 来 创建 新 
元 素 ， 参 见 代码 清单 5-6。 


代码 清单 5-6 
// 未 完成 的 代码 


$s(document) .ready (function() { 
$s('<a href="#top">back to top</a>'); 
$s('<a id="top"></a>'); 








}) 
第 一 行 代码 中 创建 了 back to top 链 接 , 而 第 二 行 代 码 则 为 这 个 链接 创建 了 一 个 作为 目标 的 锚 。 5 
但 是 ， 页 面 中 还 没有 出 现 back to top 链 接 。 图 5-3 是 此 时 页 面 的 外 观 。 


Our Professional Men and Gentlemen are Squares (to which class I 
myself belong) and Five-Sided Figures or Pentagons. 











Next above these come the Nobility, of whom there are several 
degrees, beginning at Six-Sided Figures, or Hexagons, and from 
thence rising in the number of their sides till they receive the 
honourable title of Polygonal, or many-Sided. Finally when the number 
of the sides becomes so numerous, and the sides themselves so 
small, that the figure cannot be distinguished from a circle, he is 
included in the Circular or Priestly order; and this is the highest class 
of all. 








ltisa Law of Nature with us that a male child shall have one more 





5-3 


虽然 前 面 的 两 行 代 码 创 建 了 新 的 元 素 , 但 是 还 没有 把 它们 添加 页 面 中 。 为 此 , 我 们 可 以 选择 
使 用 jQuery 提供 的 众多 插入 方法 中 的 一 种 。 


5.2.3 ”插入 新 元 素 


jQuery 提供 了 很 多 将 元 素 插 入 到 文档 中 的 方法 。 每 一 种 方法 的 名 字 都 表明 了 新 内 容 与 已 有 内 
容 之 间 的 关系 。 例 如 ， 我 们 想 把 back to top 链 接 插 入 到 每 个 段落 后 面 ， 因 此 就 可 以 使 
用 .insertAfter() 方 法 ,参见 代码 清单 5-7。 


代码 清单 5-7 
// 未 完成 的 代码 


$s (document) .ready (function() { 
$s('<a href="#top">back to top</a>') .insertAfter('div.chapter p'); 
$s('<a id="top"></a>'); 


四 
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在 将 链接 实际 地 插入 到 页 面 (也 插入 到 DOM ) 中 之 后 ，<div class="chapter"> 中 的 每 
个 段落 后 面 ， 都 应 该 出 现 back to top 链 接 ， 如 图 5-4 所 示 。 


Our Professional Men and Gentlemen are Squares (to which class I 
myself belong) and Five-Sided Figures or Pentagons. 








back to top 


Next above these come the Nobility, of whom there are several 
degrees, beginning at Six-Sided Figures, or Hexagons, and from 
thence rising in the number of their sides till they receive the 
honourable title of Polygonal, or many-Sided. Finally when the number 
of the sides becomes so numerous, and the sides themselves so 
small, that the figure cannot be distinguished from a circle, he is 
included in the Circular or Priestly order; and this is the highest class 
of all. 


back to top 








ltis a Law of Nature with us that a male child shall have one more 








图 5-4 


我 们 注意 到 , 新 链接 出 现在 单独 的 一 行 中 , 并 没有 出 现在 段落 内 部 。 这 是 因为 nsertAfter () 
方法 及 其 对 应 的 .insertBefore() 方 法 ， 都 是 在 指定 的 元 素 外 部 插入 新 内 容 。 

不 过 ,现在 的 链接 还 不 能 用 。 因 此 ， 我 们 需要 再 插入 id="top" 的 锚 。 要 插入 这 个 锚 ， 可 以 
选用 一 种 在 其 他 元 素 中 持 入 元 素 的 方法 ， 参 见 代码 清单 5-8。 


代码 清单 5-8 


$s(document) .ready (function() { 
$s('<a href="#top">back to top</a>') .insertAfter('div.chapter p'); 
$('<a id="top"></a>') .prependTo('body'); 

2 


新 增 的 代码 在 <body> 的 开头 ， 也 就 是 页 面 的 顶部 插入 了 销 元 素 。 在 通过 .insertafter () 
方法 插入 链接 和 .prependTo () 方 法 插入 销 之 后 ， 这 个 页 面 就 具备 了 完备 的 back to top 链 接 。 
如 果 再 算 上 .appendro () 方 法 ， 那 我 们 就 已 经 知道 了 在 其 他 元 素 前 、 后 插入 新 内 容 的 一 套 






































.insertBefore() 在 现 有 元 素 外 部 、 之 前 添加 内 容 ; 
.prependTo () 在 现 有 元 素 内 部 、 之 前 添加 内 容 ; 
.appendTo () 在 现 有 元 素 内 部 、 之 后 添加 内 容 ; 
.insertAfter () 在 现 有 元 素 外 部 、 之 后 添加 内 容 。 


5.2.4 ”移动 元 素 


在 back to top 链 接 的 例子 中 ， 我 们 创建 了 新 元 素 并 把 它们 插入 到 了 页 面 上 。 此 外 ， 也 可 以 取 
得 页 面 中 茶 个 位 置 上 的 元 素 , 将 它们 插入 到 另 一 个 位 置 上 。 动态 地 放置 并 格式 化 脚注 , 就 是 这 种 
插入 操作 在 实际 中 的 一 种 应 用 。 现 在 ，Flatland 的 原始 文本 中 已 经 包含 了 一 个 这 样 的 脚注 ， 但 为 
了 示范 这 种 应 用 ， 下 面 我 们 还 需要 将 文本 其 他 几 个 部 分 指定 为 脚注 : 





DODODODO 
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<p>How admirable is the Law of Compensation! <span 
class="footnote">And how perfect a proof of the natural 
fitness and, I may almost say, the divine origin of the 
aristocratic constitution of the States of Flatland!</span> 
By a judicious use of this Law of Nature, the Polygons and 
Circles are almost always able to stifle sedition in its 
very cradle, taking advantage of the irrepressible and 
boundless hopefulness of the human mind.g&hellip; 

<*/p> 


这 个 HTML 文 档 中 包含 三 个 脚注 ， 上 面 这 个 段落 里 包含 一 个 。 脚 注 的 文本 包含 在 段落 的 文本 
中 ， 通 过 <span class="footnote"></span> 隔 开 。 通 过 以 这 种 方式 来 标记 HTML， 能 够 保持 
脚注 在 上 下 文中 的 关系 。 在 为 脚注 应 用 了 和 斜体 样式 规则 后 ， 这 个 段落 的 外 观 如 图 $-5 所 示 。 


How admirable is the Law of Compensation! And how perfect a proof of the 
natural fitmess and, I may almost say, the divine origin of the aristocratic constitution of 


the States of Flatland! By a judicious use of this Law of Nature, the 

Polygons and Circles are almost always able to stifle sedition in its 

very cradle, taking advantage of the irrepressible and boundless 

hopefulness of the human mind.... 









































图 5-5 
接 下 来 , 需要 提取 出 这 些 脚 注 , 然后 把 它们 插入 到 文档 的 底部 , 具体 来 说 , 就 是 插入 到 <div 
class="chapter"> 和 <div iaq = "footer"> 之 间 。 











不 过 ， 这 里 我 们 要 记 住 的 一 点 是 ， 即 使 是 在 隐 式 迭代 的 情况 下 ， 插 入 的 顺序 也 是 预定 义 的 ， 
即 从 DOM 树 的 上 方 开 始 向 下 依次 插入 。 由 于 维持 脚注 在 页 面 上 新 位 置 中 的 顺序 很 重要 ， 所 以 我 
们 应 该 使 用 .insertBefore('#footer')。 这 样 , footnote 1 会 被 放 在 <div class= "chapter"> 
和 <div id="footer"> 之 间 ，footnote 2 会 被 放 在 footnote 1 和 <div id="footer"> 之 间 ， 然 后 
依 此 类 推 ,但 是 , 如 果 在 这 里 使 用 . insertafter('dqiv.chapter') ,那么 脚注 的 次 序 就 会 颠倒 。 
因此 ， 当 前 的 代码 应 该 如 代码 清单 5-9 所 示 。 


代码 清单 5-9 
$s (document) .ready (function() { 
$('span.footnote') .insertBefore('#footer'); 


}) 3 

由 于 脚注 放 在 <span> 标 签 中 , 这 就 意味 着 它们 在 默认 情况 下 应 该 显示 为 行内 盒子 , 因此 会 导 
致 这 3 个 脚注 前 后 相连 , 从 视觉 上 无 法 将 它们 区 分 开 来 。 不 过 , 我 们 已 经 使 用 CSS 解 决 了 这 个 问题 ， 
即将 处 于 <div class="chapter"> 外 部 的 span. footnote 元 素 的 display 属 性 设置 为 block。 

这 样 ， 我 们 的 脚注 就 具备 了 和 雏形， 如 图 $-6 所 示 。 

至 少 ,它们 现在 可 以 从 视觉 上 明显 地 分 开 。 然 而 ， 围 绕 这 些 脚注 还 有 很 多 后 续 工 作 要 做 。 更 
加 健壮 的 一 种 脚注 方案 应 该 : 

(1) 为 每 个 标注 编号 ; 

(2) 在 正文 中 标 出 提取 脚注 的 位 置 ， 使 用 脚注 的 编号 ; 

(3) 在 文本 中 的 位 置 上 创建 一 个 指向 对 应 脚注 的 链接 ， 在 脚注 中 创建 返回 文本 位 置 的 链接 。 
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to mutual warfare, and perish by one another's angles. No less than 
one hundred and twenty rebellions are recorded in our annals, besides 
minor outbreaks numbered at two hundred and thirty-five; and they 
have all ended thus. 


back to top 


"What need of a certificate?" a Spaceland critic may ask: "ls not the procreation of a Sqguare Son a certificate from Nature herself. 
proving the Equal-sidedness of the Father?" I reply that no Lady of any position will marry an uncertified Triangle. Square 
offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the Irregularity of the first 
generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses to the Triangular. 


The Equilateral is bound by oath never to permit the child henceforth to enter his former home or so much as to look upon his 
relations again, for fear lest the freshly developed organism may, by force of unconscious imitation, fall back again into his 
hereditary level. 


And how perfect a proof of the natural fitness and, I may almost say, the divine origin of the aristocratic constitution of the States 
of Flatland! 














图 5-6 
5.2.5 包装 元 素 


脚注 的 编号 可 以 直接 在 标记 中 添加 , 但 在 这 里 我 们 要 利用 标准 的 有 序列 表 来 生成 序号 。 为 此 ， 
需要 先 创建 一 个 用 于 包装 所 有 脚注 的 <ol> 元 素 ， 并 为 每 个 脚注 分 别 创建 一 个 <1i> 元 素 。 这 时 候 
就 要 用 到 包装 方法 了 。 

要 在 一 个 元 素 中 包装 男 一 个 元 素 , 必须 知道 是 把 每 个 元 素 分 别 包 装 在 各 自 的 容器 中 , 还 是 把 
所 有 元 素 包 装 在 一 个 容器 中 。 考 虑 到 要 为 每 个 脚注 编写, 我们 需要 实现 这 两 种 形式 的 包装 ,参见 
代码 清单 5-10。 


代码 清单 5-10 


$s(document) .ready (function() { 
$s('span.footnote') 
.insertBefore('#footer') 
.wrapAll('<ol id="notes"></ol>') 
"WEaD( "LLSS/ LL") 











有 

把 脚注 插入 到 页 脚 前 面 后 , 我 们 使 用 .wrapal1 () 把 所 有 脚注 都 包含 在 一 个 <ol1> 中 。 然后 再 
使 用 .wrap () 将 每 一 个 脚注 分 别 包 装 在 自己 的 <1i> 中 。 从 图 5-7 可 以 看 出 ， 这 样 就 为 脚注 添加 了 
正确 的 编号 。 





一 一 一 一 一 
have all ended thus. 


back to top 


1. “Whatneed of a certificate?" a Spaceland critic may ask: "ls not the procreation of a Square Son a certificate from 
Nature herself, proving the Equal-sidedness of the Father?”" I reply that no Lady of any position will marry an uncertified 
Triangle. Square offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the 
Irregularity of the first generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses 10 
the Triangular. 


2. The Equilateral is bound by oath never to permit the child henceforth to enter his former home or so much as to look upon 
his relations again, for fear lest the freshiy developed organism may, by force of unconscious imitation, fall back again 
into his hereditary level. 


3. And how perfect a proof of the natural fitmess and, { may almost say, the divine origin of the aristocratic constitution of 
the States of Flatland! 














图 5-7 
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接 下 来 , 我 们 要 考虑 为 提取 脚注 的 位 置 加 标记 和 编号 了 。 为 了 简单 起 见 , 我们 这 次 需要 重 写 
现 有 的 代码 ， 不 再 依赖 隐 式 迭代 。 

显 式 迭 代 

我 们 知道 ，.each () 方 法 就 是 一 个 显 式 迭代 器 ， 与 最 近 加 入 JavaScript 语 言 中 的 数组 迭代 如 
forEach() 非 常 相似 。 如 果 在 使 用 隐 式 迭代 的 情况 下 , 我 们 想 为 每 个 匹配 的 元 素 应 用 的 代码 显得 
太 过 复杂 ,就 可 以 转 而 使 用 .each()。 这 个 方法 接受 一 个 回调 函数 ,这 个 函数 会 针对 匹配 的 元 素 
集中 的 每 个 元 素 都 调用 一 次 ， 如 代码 清单 5-11 所 示 。 











代码 清单 5-11 
$s (document) .ready (function() { 
Var S$notes = $('<ol id="notes"></o0l>').insertBefore('#footer'); 
$s('span.footnote') .each (function(index) { 
$s (this) .appendTo (Snotes) .wrap('<1i></1i>'); 
ee 
这 样 修改 的 动机 稍 后 大 家 就 会 明白 。 首 先 ， 需要 理解 传递 给 .each () 回调 的 信息 。 
与 其 他 回调 函数 ( 比如 本 章 前 面 介绍 的 值 回 调 函 数 ) 类 似 ， 在 回调 函数 中 ，this 关 键 字 指 
向 当前 正在 操作 的 DOM 元 素 ， 在 代码 清单 5-11 中 ， 我 们 使 用 这 个 上 下 文 创建 了 指向 脚注 <span> 
的 jQuery 对 象 ， 将 它 添加 到 igd 为 notes 的 <o1> 中 ， 最 后 把 它 封装 在 <1i> 元 素 里 。 
为 了 在 正文 中 标记 提取 脚注 的 位 置 , 可 以 利用 .each () 回调 的 参数 。 这 个 参数 表示 人 迭代 的 次 
数 ， 从 0 开始 ， 每 迭代 一 次 就 加 1。 因 此 这 个 数值 始终 都 比 当 前 的 脚注 编号 小 1。 可 以 利用 这 个 参 
数 在 正文 中 生成 适当 的 标签 ， 如 代码 清单 5-12 所 示 。 


代码 清单 5-12 


$s (document) .ready (function() { 
Var Snotes = $('<ol id="notes"></o0l>').insertBefore('#footer'); 
$s('span.footnote') .each (function(index) { 
$('<sup>' + (index + 1) + '</sup>') .insertBefore(this); 
$s (this) .appendTo (Snotes) .wrap('<1i></1i>'); 
> 
}) 


这 样 , 在 脚注 被 从 正文 中 提取 出 来 并 插入 到 页 面 底部 之 前 , 我 们 创建 了 一 个 包含 脚注 编号 的 
<sup> 元 素 ， 并 将 它 插 入 到 正文 中 。 这 里 的 操作 顺序 十 分 重要 。 必 须要 在 脚注 被 移动 之 前 插入 这 
个 编码 ， 否 则 就 找 不 到 原始 位 置 了 。 男 外 ,还 要 注意 表达 式 ingdex+1 必 须 放 在 括号 中 ,这样 才 表 
示 是 一 个 加 法 运算 ， 因 为 “+” 在 JavaScript 中 也 可 以 用 于 拼接 字符 串 。 

这 时 候 再 看 看 页 面 (参见 图 $-8 )， 其 中 原来 的 脚注 位 置 就 出 现 了 相应 的 编号 。 
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subject of rejoicing in our country for many furlongs round. After a 
strict examination conducted by the Sanitary and Social Board, the 
infant, if certified as Regular, is with solemn ceremonial admitted into 
the class of Equilaterals. He is then immediately taken from his proud 


yet sorrowing parents and adopted by some childless Equilateral. < 
back to top 


How admirable is the Law of Compensation! By a judicious use of 
this Law of Nature, the Polygons and Circles are almost always able to 
stifle sedition in its very cradle, taking advantage of the irrepressible 
and boundless hopefulness of the human mindg.... 














图 5-8 


5.2.6 ”使 用 反 向 插入 方法 


在 代码 清单 5-12 中 ， 我们 先 把 创建 的 内 容 插 入 到 元 素 前 面 ， 然 后 再 把 同一 个 元 素 插 入 到 文档 
中 的 男 一 个 位 置 。 通 常 ， 当 在 jQuery 中 操作 元 素 时 ， 利 用 连 绎 方法 更 简洁 也 更 有 效 。 可 是 我 们 现 
在 没有 办 法 这 样 做 , 因为 this 是 .insertBefore() 的 目标 , 是 .appendTo() 的 内 容 。 此 时 , 利 
用 反 向 插入 方法 ， 可 以 帮 我 们 解决 问题 。 

像 .insertBefore() 和 .appendTo() 这 样 的 插入 方法 , 一 般 都 有 一 个 对 应 的 反 向 方法 。 反 
向 方法 也 执行 相同 的 操作 ， 只 不 过 “目标 ”和 “内 容 ” 正 好 相反 。 例 如 : 

$ ('<p>Hello</p>') .appendTo ('#container'); 

与 下 面 的 代码 结果 一 样 : 

$ ('#container') .append ('<p>Hello</p>'); 


下 面 我 们 就 使 用 .before() 人 代替 .insertBefore() 来 重 构 代 码 ， 人 参见 代码 清单 5-13 。 
代码 清单 5-13 


$s(document) .ready (function() { 
Var Snotes = $('<ol id="notes"></ol1>') 
.insertBefore('#footer'); 
$s('span.footnote') .each (function(index) { 
S(this) 
.before('<sup>' + (index + 1) + '</sup>') 
.appendTo (Snotes) 
Wrap'( "<1iS></L1i>"); 















































}) 
}); 
插入 方法 回调 
ul 反 向 插入 方法 可 以 接受 一 个 函数 作为 参数 ,与 .attr() 和 .css() 方 法 类 似 。 


Q 这 个 传 入 的 函数 会 针对 每 个 目标 元 素 调 用 , 返回 被 插入 的 HTML 字 符 事 。 在 此 其 
实 也 可 以 使 用 这 个 技术 ， 但 由 于 这 样 就 需要 对 每 个 脚注 都 重复 一 遍 相同 的 操作 ， 
所 以 还 是 使 用 一 个 .each () 方 法 来 得 更 清晰 。 
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现在 , 我 们 可 以 考虑 最 后 一 步 了 : 在 正文 中 相应 的 位 置 创建 指向 匹配 脚注 的 链接 和 在 脚注 中 
创建 指向 正文 位 置 的 链接 。 为 此 ， 每 个 脚注 需要 4 处 标记 : 两 个 链接 ， 一 个 在 正文 中 ， 一 个 在 脚 
注 中 ; 以 及 两 个 ia 属性 。 因 为 这 样 一 来 ， 传 人 .before () 方 法 的 参数 会 变 得 复杂 ， 所 以 有 必要 
在 这 里 使 用 一 种 新 的 创建 字符 串 的 方法 。 

在 代码 清单 5-13 中 ,我 们 使 用 了 “+” 操 作 符 来 拼接 字符 串 。 使 用 + 操作 符 虽然 没有 问题 ， 但 
如 果 要 拼接 的 字符 串 太 多 , 那 看 起 来 就 会 很 乱 。 所 以 , 我 们 在 这 里 使 用 数组 的 .join () 方 法 来 构 
建 一 个 更 大 的 数组 。 换 句 话 说， 下 面 的 两 行 代码 结果 相同 。 


Var Str = ‘a + 'b' + 'c¢'; 
var BEE = [a Bh, Te] Tonm( yy 


虽然 这 个 例子 要 求 输入 更 多 字符 , 但 使 用 .join () 方 法 可 以 避免 因 要 拼接 的 字符 串 过 多 而 引 
起 混乱 。 下 面 我 们 再 看 看 示例 代码 吧 ， 代 码 清 单 5-14 就 是 使 用 . join () 创建 字符 串 的 过 程 。 


代码 清单 5-14 


$s(document) .ready (function() { 
var Snotes = $('<ol id="notes"></ol1>') 
.insertBefore('#footer'); 
$s('span.footnote') .each (function(index) { 
$s (this) 
.pefore([ 
eBUD> 
index + 1, 
'</sup>' 
] .join('')) 
.appendTo ($notes) 
:Wea ( <li/ li LY)y 
天 
}) > 


注意 ， 由 于 数组 的 每 个 元 素 会 分 别 执行 运算 ， 因 此 不 再 需要 把 index+1 放 在 括号 里 了 。 
使 用 这 种 技巧 ， 可 以 为 脚注 标签 添加 一 个 指向 页 面 底部 的 链接 和 一 个 唯一 的 id 值 。 同 时 在 后 
面 的 方法 中 , 也 要 给 <1i> 元 素 中 添加 相应 的 jg 属性 , 以 便 该 链接 有 匹配 的 目标 , 参见 代码 清单 5-15。 


代码 清单 5-15 


$s (document) .ready (function() { 
Var Snotes = $('<ol id="notes"></ol1>') 
.insertBefore('#footer'); 
$s('span.footnote') .each (function(index) { 
$s (this) 
.pefore([ 
'<a href="#footnote-', 
index + 1, 
" id="context-', 
index + 1, 
" class="context">', 
<SUD> '， 
index + 1, 
"<rBuD></a>" 
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].join('')) 
.appendTo (Snotes ) 
.wrap('<li id="footnote-' + (index + 1) + '"></1i>'); 
} 3 
用 








添加 了 这 些 标记 之 后 , 每 个 脚注 标签 就 有 了 指向 页 面 底部 对 应 脚注 的 链接 。 那 么 所 剩 的 就 是 


在 脚注 中 创建 一 个 指向 其 上 下 文 的 链接 了 。 
法 .append()， 参 见 代 码 清单 5-16。 


代码 清单 5-16 


$s(document) .ready (function() { 
Var Snotes = $('<ol id="notes"></ol1>') 
.insertBefore('#footer'); 
$('span.footnote') .each (function (index) 
$s (this) 
.before([ 
'<a href="#footnote-', 
index + 1, 
mm Td="eontext=", 
index + 1, 
'" class="context">', 
“SUD> 7 
index + 1, 
'</sup></a>' 
] .join('')) 
.appendTo (Snotes ) 
.append([ 
'&nbsp; (<a href="#context-', 
index + 1, 
'">context</a>)' 
] .join('')) 
.wrap('<li id="footnote-' + 
这。 
有 


(index + 1) + 


为 此 ， 可 以 使 用 .appendTo() 的 反 向 方 


{ 


ms/ 


注意 ， 这 里 的 href 指向 了 脚注 标签 中 的 ia。 在 图 5-9 中 ， 可 以 看 到 包含 新 链接 的 脚注 。 


have all ended thus. 


back to top 


the Tianguiar (context) 


into his hereditary level. (context) 


the States of Flatland! (context) 








1. "What need ofa certificate?" a Spaceland critic may ask "ls not the procreation of a Square Son a certificate from 
Nature herself’ proving the Equal-sidedness of the Father?" I reply that no Lady of any position will marry an uncertified 
Triangle. Square offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the 
Jrregularity of the first generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses 加 


2, The Equilateral is bound by oath never to permit the child henceforth to enter his former home or so much as to look upon 
his relations again, for fear lest the freshly developed organism may, by force of unconscious imitation, fall back again 


3. And how perfect a proof of the natural fitmess and, { may almost say, the divine origin of the aristocratic constitution of 





Tormey 











图 5-9 
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5.3 复制 元 素 


本 章 到 目前 为 止 已 经 示范 的 操作 包括 : 插入 新 创建 的 元 素 、 将 元 素 从 文档 中 的 一 个 位 置 移动 
到 另 一 个 位 置 ， 以 及 通过 新 元 素来 包装 已 有 的 元 素 。 可 是 ， 有 时 候 也 会 用 到 复制 元 素 的 操作 。 例 
如 ,可 以 复制 出 现在 页 面 顶部 的 导航 菜单 ， 并 把 副本 放 到 页 脚 上 。 实 际 上 ,无 论 何 时 ， 只 要 能 通 
过 复制 元 素 增强 页 面 的 视觉 效果 ,都 是 以 重用 代码 来 实现 的 好 机 会 。 毕 竞 ， 如 果 能 够 只 编写 一 次 
代码 并 让 jQuery 蔡 我 们 完成 复制 ， 何 必要 重 写 两 遍 同 时 又 增加 双 倍 的 出 错 机 会 呢 ? 

在 复制 元 素 时 ， 需 要 使 用 jQuery 的 .clone () 方 法 ， 这 个 方法 能 够 创建 任何 匹配 的 元 素 集合 
的 副本 以 便 将 来 使 用 。 与 本 章 前 面 使 用 $ () 创建 元 素 时 一 样 ， 在 为 复制 的 元 素 应 用 一 种 插入 方法 
之 前 ， 这 些 元 素 不 会 出 现在 文档 中 。 

例如 ， 下 面 这 行 代码 将 创建 <div class="chapter"> 中 第 一 段落 的 副本 : 

$('div.chapter p:eq(0)') .clone(); 

但 仅 创建 副本 还 不 足以 改变 页 面 的 内 容 。 要 想 让 复制 的 内 容 显示 在 网 页 中 ,可 以 使 用 插入 方 
法 将 其 放 到 <div class="chapter"> 前 面 。 






























































$('div.chapter p:eq(0)') .clone().insertBefore('div.chapter'); 
这 样 ， 同 一 个 段落 就 会 出 现 两 次 。 可 见 ，.clone () 与 插 人 方法 的 关系 就 如 同 复制 和 粘贴 
一 样 。 


连同 事件 一 起 复制 
站 在 默认 情况 下 ，.clone () 方法 不 会 复制 匹配 的 元 素 或 其 后 代 元 素 中 绑 定 的 
ia 事件 。 不 过 ， 可 以 为 这 个 方法 传递 一 个 布尔 值 参数 ， 将 这 个 参数 设置 为 true， 
就 可 以 连同 事件 一 起 复制 , 即 .clone (true)。 这样 一 米 , 就 可 以 避免 每 次 复制 
之 后 还 要 手工 重新 绑 定 事件 的 麻烦 ( 第 3 章 曾 讨论 过 )。 


通过 复制 创建 突出 引用 
很 多 网 站 都 和 它们 的 印刷 版 一 样 ,使 用 了 突出 引用 (pull quote ) 来 强调 小 块 的 文本 并 吸引 读 








者 的 眼球 。 所 谓 突出 引用 , 就 是 从 正文 中 提取 一 部 分 文本 , 然后 为 这 段 文本 应 用 特殊 的 图 形 样式 。 
通过 .clone () 方 法 可 以 轻而易举 地 完成 这 种 装饰 效果 。 首先 , 我 们 来 看 一 看 例子 文本 的 第 三 段 : 
<p> 


<span class="pull-quote">It is a Law of Nature 
<span class="drop">with us</span> that a male child shall 
have <strong>one more side</strong> than his father</span>, 
so that each generation shall rise (as a rule) one step in 
the scale of development and nobility. Thus the son of a 
Square is a Pentagon; the son of a Pentagon, a Hexagon; and 
SO on. 

/D> 
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我 们 注意 到 这 个 段落 以 <span class="pull-quote"> 元 素 开始 ， 其 中 的 类 





是 为 了 复制 而 


准备 的 。 当 把 复制 的 <span> 中 的 文本 粘贴 到 其 他 位 置 上 时 ， 还 需要 修改 它 的 样式 属性 ， 以 便 它 





与 原来 的 文本 区 别 开 来 。 
要 实现 这 种 样式 , 需要 为 复种 
下 样式 规则 : 


.pulled { 
position: absolute; 
width: 120px; 
top: -20px; 
right: -180px; 
padding: 20px; 
OE 
background: #e5e5e5; 
border: lpx Solid #999; 
border-radius: 8px; 
box-shadow: lpx lpx 8px rgbal(0, 
} 


这 样 ， 





1 的 <span> 添 加 一 个 pulled 类 


italic 1.2em "Times New Roman'" ， 


就 为 pull-quote 添 加 了 浅 灰 色 的 





， 并 在 样式 表 中 为 这 个 类 添加 如 


Times, serif; 


33 这 





刁 已 国 . 
月 尿 、 














一 些 内 边 距 和 不 同 的 字体 。 更 重要 的 是 将 它 


绝对 定位 到 了 在 DOM 中 ( 绝对 或 相对 ) 定位 的 最 近 


斤 祖先 元 素 的 上 方 20px 、 右 侧 20px。 如 果 祖 先 


元 素 中 没有 应 用 定位 〈 除 


定位 。 


样式 。 


a 


从 了 static ) 的 元 素 ， 那 么 pul11-quote 就 会 相对 于 文档 中 的 <pody> 元 素 
为 此 ， 需要 在 jQuery 代码 中 确保 复制 的 pul1l1-quote 的 父 元 素 应 用 了 position:relative 


计算 CSS 位 置 

虽然 pull1-quote 人 金子 的 上 沿 位 置 比较 直观 ， 但 说 到 它 的 左边 位 于 其 定位 的 
父 元 素 右 侧 20 像 素 时 ， 涉 怕 就 没有 那么 好 理解 了 。 要 得 到 这 个 数字 ， 需 要 先 计算 
pull-quote 人 金子 的 总 宽度 ， 即 width 属 性 的 值 加 上 左右 内 边 距 ， 或 者 说 145px 十 
5px + 10px， 结 果 是 160px。 当 为 pul1-quote 设 置 right 属 性 时 ， 值 为 0 会 使 
pull-quote 的 右边 与 其 父 元 素 的 右边 对 齐 。 因 此 ， 要 使 它 的 左边 位 于 父 元 素 右 


侧 20px， 需 要 在 相反 的 方向 上 将 它 移动 比 其 总 宽度 多 20px 的 距离 ， 


即 -180px。 





现在 我 们 再 回 到 jQuery 代码 中 ， 看 看 怎 
， 然 后 为 选择 的 元 素 应 用 position:relative 样 式 ， 


"pul1-quote"> 元 素 的 选择 符 表达 式 开始 
参见 代码 清单 5-17。 


代码 清单 5-17 


$s(document) .ready (function() { 
$s('span.pull-gquote') .each (functio 
Var SparentParagraph = $ (this) 





$sparentParagraph.css('position', 


})y 
二 


灵 社区 会 员 








么 应 用 样式 。 首 先 ， 从 匹配 所 有 <span class= 





n(index) 


{ 


.parent('p'); 


'relative'); 
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这 里 , 我 们 同样 把 需要 多 次 用 到 的 选择 符 表达 式 保 存在 变量 sparentParagraph 中 , 以 提升 
性 能 和 可 读 性 。 

接 下 来 就 是 创建 突出 引用 本 身 , 以 便利 用 准备 好 的 CSS 样 式 。 此 时 , 我 们 先 复制 每 个 <span> 
元 素 ， 然 后 为 得 到 的 副本 添加 pulleq 类 ， 最 后 再 把 这 个 副本 插入 到 其 父 段落 的 开始 处 ， 参 见 代 
码 清单 5-18。 


代码 清单 5-18 


s(dqocument) .ready (function() { 
$s('span.pull-quote') .each (function(index) { 
Var SparentParagraph = $(this) .parent('p'); 


SparentParagraph.css('position', 'relative'); 
Var S$SclonedCopy = $(this).clone(); 
$clonedCopy 


.addClass('pulled') 
.prependTo ($parentParagraph); 
}) ; | 
这 里 ,我 们 又 定义 了 一 个 新 变量 $clonedcopy， 以 便 后 面 使 用 。 
因为 前 面 已 经 为 这 个 复制 的 元 素 设置 了 绝对 的 定位 , 因此 它 在 段落 中 的 位 置 是 无 所 谓 的 。 根 
据 CSS 规 则 中 的 设置 ， 只 要 它 处 于 这 个 段落 的 内 部 ， 它 就 会 相对 于 段落 的 上 边 和 右边 进行 定位 。 
目前 ， 段落 与 其 中 插入 的 突出 引用 的 外 观 如 图 5-10 所 示 。 
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It is a Law of Nature with us that a male child shall have one more side Ttis a Law of Nature 
than his father, so that each generation shall rise (as a rule) one step in with us that a male 
the scale of development and nobility. Thus the son of a Square isa child shall have one 
Pentagon; the son of a Pentagon, a Hexagon; and so on. more side than his 
back to top Vine 








But this rule applies not always to the Tradesman, and still less often to 
Cl . . sd 








图 5-10 


这 个 开头 不 错 。 在 接 下 来 的 任务 中 ， 我 们 对 突出 引用 的 内 容 进行 一 番 整 理 。 


5.4 内 容 setter 和 getter 方法 


如 果 能 够 对 突出 引用 稍 作 修 改 ， 去 掉 一 些 文本 并 代 之 以 省 略 号 ,那么 效果 会 更 好 。 为 此 , 我 
们 在 例子 文本 中 已 经 将 某 些 文本 包装 在 了 <span class="drop"> 元 素 中 。 

实现 这 种 替换 的 最 简便 方式 , 就 是 直接 用 新 的 HTML 人 代替 旧 的 内 容 。 此 时 , 就 要 用 到 .phtml () 
方法 了 ， 参 见 代 码 清单 5-19。 
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代码 清单 5-19 


$s(document) .ready (function() { 
$s('span.pull-gquote') .each (function(index) { 
Var SparentParagraph = $(this) .parent('p'); 
SparentParagraph.css('position', 'relative'); 


Var $clonedCopy = $(this).clone(); 
$sclonedCopy 
.addClass('pulled') 
.find('span.drop') 
.html('&hellip;') 
.end() 
.prependTo (SparentParagraph) : 
jy 
专用 | 


代码 清单 5-19 中 新 增 的 几 行 代码 使 用 了 我 们 在 第 2 章 讨 论 过 的 DOM 遍 历 技术 。 首 先 ， 
用 .find() 方 法 找到 <span class="drop"> 元 素 ， 对 这 些 元 素 进 行 操 作 , 然后 通过 调用 .end ( 
方法 重新 返回 <span class="drop"> 元 素 集 合 。 在 此 期 间 ， 我 们 调用 .html ( et 
成 了 省 略 号 (使 用 的 是 相应 的 HTML 实 体 )。 

在 调用 .html () 而 不 传递 参数 的 情况 下 ， 这 个 方法 返回 匹配 的 元 素 中 的 HTML 标 记 。 而 传人 
参数 后 ， 元 素 的 内 容 将 被 传人 的 HTML 替换 掉 。 在 此 要 注意 传人 的 HTML 必 须 是 有 效 的 ， 而 且 要 
对 特殊 字符 进行 转 义 。 

这 样 ， 引 用 中 的 特定 文本 就 被 奉 换 成 了 省 略 号 ， 如 网 5-11 所 示 。 






































back to top 
lt is a Law of Nature with us that a male child shall have one more side Ttis a Law of Nature 
than his father, so that each generation shall rise (as a rule) one step in .that a male child 
the scale of development and nobility, Thus the son of a Square isa shail have one more 
Pentagon; the son of a Pentagon, a Hexagon; and so on. Side than his father 
back to top 

tn 











图 5-11 


引用 一 般 不 会 使 用 原来 的 字体 样式 ， 例 如 one more side 的 粗 体 。 换 名 话说， 我 们 真正 想 在 引 
用 中 显示 的 是 去 掉 了 了 <span class="pull- qoute"> 中 的 <strong>、 <em>、<a href> 及 其 他 
行内 标签 之 后 的 文本 。 要 想 去 掉 这 些 HTML 标 签 ， 就 得 使 用 .html () 方 法 的 “伙伴 ”.text () 方 
法 了 。 

与 .html () 方 法 类 似 ，.text () 也 可 以 取得 匹配 元 素 的 内 容 , 或 者 用 新 字符 串 蔡 换 匹 配 元 素 
的 内 容 。 但 是 ， 与 .html () 不同 的 是 ，.text () 始终 会 取得 或 设置 纯 文本 内 容 。 在 使 用 .text () 
取得 内 容 时 ， 所 有 HTML 标 签 都 将 被 忽略 ， 而 所 有 HTML 实 体 也 会 被 转换 成 对 应 的 字符 。 而 在 通 
过 它 设置 内 容 时 ， 诸 如 < 这 样 的 特殊 字符 ， 都 会 被 转换 成 等 价 的 HTML 实 体 ， 如 代码 清单 5-20 
所 示 。 
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代码 清单 5-20 


$s (document) .ready (function() { 
$s('span.pull-quote') .each (function(index) { 
Var SparentParagraph = $(this) .parent('p'); 
SparentParagraph.css('position', 'relative'); 
var $clonedCopy = $(this).clone(); 
sclonedCopy 
.addClass('pulled') 
.find('span.drop') 
.html('&hellip;') 
.end() 
.text ($clonedCopy .text ()) 
.prependTo ($parentParagraph); 
}); 
地 


在 使 用 以 上 代码 取得 引用 的 内 容 时 ,我们 得 到 的 是 纯 文本 , 没有 任何 标签 。 因 此 在 将 这 些 文 
本 重新 传人 .text () 时 ， 就 没有 标记 、 粗 体 文本 了 ， 如 图 5-12 所 示 。 























ror rr 
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But this rule applies not always to the Tradesman, and Still less often to 














图 5-12 


5.5 DOM 操作 方法 的 简单 归纳 


对 于 jQuery 提供 的 大 量 DOM 操 作 方 法 ， 应 该 根据 要 完成 的 任务 和 元 素 的 位 置 作出 不 同 的 选 
择 。 本 章 只 介绍 了 一 部 分 DOM 操 作 方法 ,但 其 他 方法 的 使 用 与 这 些 方 法 类 似 ; 第 12 章 还 将 更 全 
面 地 讨论 DOM 操 作 方法 。 下 面 ， 我们 简单 地 归纳 出 一 些 方法 ,这 些 方法 几乎 能 够 在 任何 情况 下 ， 
完成 任何 任务 。 

(1) 要 在 HTML 中 创建 新 元 素 ， 使 用 $ () 函数 。 

(2) 要 在 每 个 匹配 的 元 素 中 插入 新 元 素 , 使 用: 


四 .append ( ) 








.appendTo() 
.prepend() 
国 


.prependTo() 
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(3) 要 在 每 个 匹配 的 元 素 相 邻 的 位 置 上 搬入 新 元 素 ， 使 用 : 
@m .2fLer() 
@ .insertAfter() 
@m .beforel() 
.insertBefore!() 
(4) 要 在 每 个 匹配 的 元 素 外 部 插入 新 元 素 ， 使 用 : 


加 .wrap() 





四 .WrapAll () 
四 .wrapInner () 
(5) 要 用 新 元 素 或 文本 替换 每 个 匹配 的 元 素 ， 使 用 : 


时 .html() 





四 .七 eXt() 
.replaceAll() 





.replaceWith() 

(6) 要 移 除 每 个 匹配 的 元 素 中 的 元 素 ， 使 用 : 
nm .empty () 

(7) 要 从 文档 中 移 除 每 个 匹配 的 元 素 及 其 后 代 元 素 ， 但 不 实际 删除 它们 ， 使 用 : 
.remove!() 


.detach() 





5.6 ”小结 


在 本 章 中 , 我 们 使 用 jQuery 的 DOM 操 作 方 法 完成 了 元 素 的 创建 、 复制 、 重 组 以 及 内 容 修饰 等 
操作 。 通 过 在 一 个 网 页 上 应 用 这 些 方 法 , 将 一 组 普通 的 段落 转换 成 了 带 脚 注 、 突 出 引用 、 返 回 链 
接 以 及 经 过 样式 化 的 文本 摘录 。 总 之 ， 这 一 章 展示 了 使 用 jQuery 添加 、 删 除 和 重 排 内 容 有 多 么 容 
易 。 此 外 ， 我 们 还 学 习 了 如 何 修改 页 面 元 素 的 CSS 和 DOM 属 性 。 

下 一 章 我 们 将 通过 jQuery 的 Ajax 方法 享受 一 次 到 服务 需 的 往返 旅行 。 

















延伸 阅读 
第 12 章 将 会 更 深入 地 介绍 DOM 操 作 。 要 了 解 有 关 DOM 操 作 完 整 介绍 ， 请 参考 本 书 附录 C 或 
jQuery 官方 文档 : http:/api.jquery.comy/。 


5.7 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
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“挑战 ”练习 有 一 些 难 度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : http://api. 
jquery.comy/。 

(1) 修改 添加 back to top 链 接 的 代码 ， 以 便 这 些 链接 只 从 第 四 段 后 面 才 开始 出 现 。 

(2) 在 单 击 back to top 链 接 时 ,为 每 个 链接 后 面 添加 一 个 新 段落 ， 其 中 包含 You were here 字 样 。 
确保 链接 仍然 有 效 。 

(3) 在 单 击 作 者 名 字 时 ， 把 文本 改 为 粗 体 (通过 添加 一 个 标签 ， 而 不 是 操作 类 或 CSS 属 性 )。 

(4) 挑战 : 在 随后 单 击 粗 体 作者 名 字 时 , 删除 之 前 添加 的 <b> 元 素 ( 也 就 是 在 粗 体 文本 与 正常 
文本 之 间 切 换 )。 

(5) 挑战 ， 为 正文 中 的 每 个 段落 添加 一 个 ijnnabitants 类 ,但 不 能 调用 .addclass () 方 法 。 
确保 不 影响 现 有 的 类 。 
































图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


通过 Ajax 发 送 数据 








Ajax ( Asynchronous JavaScript and XML ， 蜡 步 JavaScript 和 XML ) 这 个 概念 是 由 Jesse James 
Garrett 在 2005 年 发 明 的 。 它 的 含义 可 谓 丰 富 , 因为 这 个 术语 本 身 涵盖 的 是 一 组 相关 的 能 力 和 技术 。 
从 根本 上 来 说 ， 一 个 Ajax 解决 方案 中 涉及 如 下 技术 。 

口 JavaScript: 处 理 与 用 户 及 其 他 浏览 右 相 关 事 件 的 交互 ,解释 来 自 服务 融 的 数据 ， 并 将 其 
呈现 在 页 面 上 。 

口 XMLHttpRequest: 这 个 对 象 可 以 在 不 中 断 其 他 浏览 器 任务 的 情况 下 向 服务 器 发 送 请 求 。 
口 文本 文件 : 服务 器 提供 的 XML 、HTML 或 JSON 格 式 的 文本 数据 。 

Ajax 技术 已 经 成 为 Web 开 发 更 上 一 层 楼 的 关键 ， 它 能 将 静态 的 网 页 转换 成 具有 交互 性 的 Web 
应 用 。 丝 毫 不 用 奇怪 ， 浏 览 需 对 XMLHEtpReauest 对 象 的 实现 也 不 完全 一 致 ， 但 jQuery 可 以 帮 有 我 
们 解决 这 个 问题 。 

本 章 ， 我 们 要 学 习 如 下 内 容 : 

口 不 刷新 页 面 而 从 服务 需 加 载 数据 ; 

口 通过 JavaScript 在 浏览 器 中 向 服务 器 发 送 数据 ; 
D 在 客户 端 使 用 HTML 、XML 和 JSON 等 数据 ; 
口 向 用 户 反馈 Ajax 请 求 的 状态 。 


6.1 基于 请 求 加 载 数 据 


在 所 有 炒作 和 粉饰 的 背后 ，Ajax 只 不 过 是 一 种 无 需 刷新 页 面 即 可 从 服务 器 ( 或 客户 端 ) 上 加 
载 数据 的 手段 。 这 些 数据 的 格式 可 以 是 很 多 种 ,而 且 ， 当 数据 到 达 时 也 有 很 多 处 理 它 们 的 方法 可 
供 选择 。 本 章 后 面 ， 当 我 们 以 多 种 方式 完成 同样 的 基本 任务 时 ， 就 能 够 清楚 地 看 到 这 一 点 。 

假设 我 们 要 创建 一 个 页 面 , 用 以 显示 字典 中 的 词 条 ,， 词 条 按照 英文 首 字 母 分 组 。 那 么 ,定义 
页 面 内 容 区 的 HTML 代 码 可 以 像 这 下 面 这 样 : 


<div id="dictionary"> 
</div> 


对 ， 没 错 ! 这 个 页 面 一 开始 没有 内 容 。 下 面 我 们 将 使 用 jQuery 的 各 种 Ajax 方 法 取得 字典 词 条 
并 用 来 填充 这 个 <div>。 





















































图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


6.1 基于 请 求 加 载 数据 107 





下 载 代码 示例 
RR 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 
Q 档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完整 的 示例 
代码 : Packt Publishing 网 站 http:/www.packtpub.com/support， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


为 需要 一 种 触发 加 载 过 程 的 方式 ， 所 以 我 们 添加 了 几 个 调用 事件 处 理 程序 的 按钮 : 


<div class="letters"> 

<div class="letter" id="letter-a"> 

<h3><a href="entries-a.html">A</a></h3> 
</div> 
<div class="letter" id="letter-b"> 

<h3><a href="entries-a.html">B</a></h3> 
</div> 
<div class="letter" id="letter-c"> 

<h3><a href="entries-a.html">C</a></h3> 
</div> 
<div class="letter" id="letter-d"> 


<h3><a href="entries-a.html">D</a></h3> 6 
</div> 


<!-- and so on --> 
</div> 


这 些 简单 的 链接 可 以 把 我 们 引导 到 包含 字母 对 应 的 字典 条 目的 页 面 。 我 们 将 根据 渐进 增强 的 
原则 ， 让 这 些 链接 在 不 重新 加 载 整个 页 面 的 前 提 下 更 新 页 面 。 
再 添加 一 些 CSS 规 则 ， 就 得 到 了 如 图 6-1 所 示 的 页 面 。 















































The Devil's Dictionary 
by Ambrose Bierce 


ID IO ID | 














图 6-1 
下 面 ， 我 们 关注 的 焦点 就 是 如 何 向 页 面 中 填充 内 容 。 

















6.1.1 追加 HTML 

















Ajax 应 用 程序 通常 只 不 过 是 一 个 针对 HTML 代 码 块 的 请 求 。 这 种 被 称 作 AHAH ( Asynchronous 
HTTP and HTML， 异 步 HTTP 和 HTML ) 的 技术 ， 通 过 jQuery 来 实现 只 是 小 菜 一 碟 。 首 先 ， 需 要 
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一 些 供 插入 用 的 HTML， 我 们 把 这 些 HTML 放 在 与 主 文档 位 于 同一 目录 下 的 a.html 文 件 中 。 第 二 
个 HTML 文 件 开始 处 的 代码 如 下 : 


<div class="entry"> 
<h3 class="term">ABDICATION</h3> 
<div class="part">n.</div> 
<div class="definition"> 
An act whereby a sovereign attests his sense of the high 
temperature of the throne. 
<div class="gquote"> 
<div class="quote-line">Poor Isabella's Dead, whose 
abdication</div> 
<div class="quote-line">Set all tongues wagging in the 
Spanish nation.</div> 
<div class="gquote-line">For that performance 'twere 
unfair to scold her:</div> 
<div class="gquote-line">She wisely left a throne too 
hot to holgd her.</div> 
<div class="quote-line">To History she'll be no royal 
riddle &mdash; </div> 
<div class="quote-line">Merely a plain parched pea that 
jumped the griddle.</div> 
<div class="quote-author">G.J.</div> 
</div> 
</div> 
</div> 





<div class="entry"> 
<h3 class="term">ABSOLUTE</h3> 
<div class="part">adj.</div> 
<div class="definition"> 
Independent, irresponsible. An absolute monarchy is one 
in which the sovereign does as he pleases so long as he 
pleases the assassins. Not many absolute monarchies are 
left, most of them having been replaced by limited 
monarchies, where the sovereign's power for evil (and for 
good) is greatly curtailed, and by republics, which are 
governed by chance. 
</div> 
</div> 


页 面 的 HTML 代 码 中 还 包含 更 多 词 条 。 单 独 查 看 这 个 文档 ,结果 显示 它 非常 简单 ， 如 图 








我 们 注意 到 ，a.html 并 不 是 一 个 真正 的 HTML 文 档 ， 它 不 包含 <html>、<head> 或 者 <body>， 
只 包含 最 基本 的 人 代码。 通常， 我 们 把 这 种 文件 叫做 片段 ; 它 唯 一 目的 就 是 供 插入 到 其 他 HTML 文 
档 中 使 用 ,插入 的 过 程 如 代码 清单 6-1 所 示 。 


代码 清单 6-1 


$s (document) .ready (function() { 
$('#letter-a a').click(function(event) { 
event .preventDefault(); 
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$s('#dictionary') .load('a.html'); 





ABDICATION 


n. 

An act whereby a sovereign attests his sense of the high temperature of the throne. 
Poor Isabellas Dead, whose abdication 

Set all tongues wagging in the Spanish nation. 

For that performance 'twere unfair to scold her: 

She wisely left a throne too hot to hold her. 

To History she'll be no royal riddle 一 

Merely a plain parched pea that jumped the griddle. 

GJ. 


ABSOLUTE 


adj. 

Independent, irresponsible. An absolute monarchy is one in which the sovereign does as he 
pleases so long as he pleases the assassins. Not many absolute monarchies are left, most of them 
having been replaced by limited monarchies, where the sovereign's power for evil (and for good) 
is greatly curtailed, and by republics, which are governed by chance. 


ACKNOWLEDGE 











6-2 


其 中 ，.1loada() 方 法 蔡 我 们 完成 了 所 有 烦琐 复杂 的 工作 ! 这 里 ， 我 们 通过 常规 的 jQuery 选择 
符 为 HTML 片段 指定 了 目标 位 置 ， 然 后 将 要 加 载 的 文件 的 URL 作 为 参数 传递 给 . 1oad () 方 法 。 现 
在 ， 当 单 击 第 1 个 按钮 时 ， 这 个 文件 就 会 被 加 载 并 搬入 到 <dqiv ia="aictionary"> 内 部 。 而 且 ， 
当 搬 入 完成 后 ， 浏 览 需 会 立即 呈现 新 的 HTML， 如 图 6-3 所 示 。 




















The Devil's Dictionary 


by Ambrose Bierce 


A ABDICATION n. 

B An act whereby a sovereign attests his sense of the high temperature of the throne. 
EE Poor lsabella's Dead, whose abdication 

c Set all tongues wagging in the Spanish nation. 

a For that performance ‘twere unfair to scold her: 

D She wisely left a throne too hot to hold her. 


To History she'l be no royal riddle 一 
hioroly a nlain narr| 


6-3 


从 图 6-3 中 可 以 看 出 , 虽然 这 个 HTML 片 段 之 前 没有 样式 , 但 现在 已 经 应 用 了 样式 。 这些 样式 
Ts 即 当 新 HTML 片段 插入 时 ， 相 应 的 CSS 规 则 也 会 立即 应 用 到 它 
的 标签 

文 个 例子 : 当 单 击 按钮 时 , 字典 中 的 解释 会 立即 出 现 。 这 只 是 在 本 地 运行 应 用 程序 的 一 
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种 特殊 情况 。 如 果 通 过 网 络 来 传递 相同 的 文档 ， 那 么 需要 多 长 的 时 间 延 迟 或 中 断 是 很 难 佑 计 的 。 
下 面 我 们 添加 一 个 警告 框 ， 使 其 在 加 载 完 解释 内 容 后 立即 显示 ， 参 见 代 码 清单 6-2。 


代码 清单 6-2 


s(dqocument) .ready (function() { 
$('#letter-a a').click(function(event) { 
event .preventDefault(); 
$s('#dictionary') .load('a.html'); 
alert('Loaded!'); 
3 
} 


根据 代码 中 的 结构 ， 你 可 能 会 认为 警告 框 只 有 在 加 载 过 程 完成 后 才 会 显示 。 因 为 JavaScript 
通常 以 同步 方式 执行 代码 ， 即 严格 按照 顺序 逐 行 执 行 。 

然而 ， 当 我 们 在 运行 中 的 服务 器 上 测试 上 面 这 些 代码 时 ， 由 于 网 络 延 运 ， 警告 框 很 可 能 先 于 
加 载 完 成 就 出 现 了 。 这 是 因为 所 有 Ajax 请 求 在 默认 情况 下 都 是 异步 的 , 否则 , 我 们 就 要 称 它 为 Sjax 
了 ?， 而 后 者 显然 难以 与 Ajax 相提并论 ?2! 

异步 加 载 意 味 着 在 发 出 取得 HTML 片段 的 HTTP 请 求 后 ， 会 立即 恢复 脚本 执行 ， 无 需 等 待 。 
在 之 后 的 某 个 时 刻 ， 当 浏览 器 收 到 服务 器 的 响应 时 ， 再 对 响应 的 数据 进行 处 理 。 这 通常 都 是 人 们 
期 望 的 行为 ,但 它 不 会 导致 在 等 待 数 据 返 回 期 间 锁 定 整 个 Web 浏 览 器 。 

对 于 必须 要 延迟 到 加 载 完 成 才能 继续 的 操作 ，jQuery 提 供 了 一 个 回调 函数 。 我 们 在 第 4 章 就 
已 经 使 用 过 回调 函数 了 。 通过 回调 函数 可 以 在 某 些 效果 完成 之 后 执行 操作 。Ajax 回 调 的 功能 与 此 
类 似 ， 只 不 过 是 在 数据 从 服务 器 返回 后 执行 操作 。 本 章 后 面 将 会 在 学 习 从 服务 器 加 载 JSON 数 据 
时 展示 使 用 回调 函数 的 例子 。 


















































6.1.2 ”操作 JavaScript 对 象 


通过 请 求 获取 充分 格式 化 的 HTML 虽 然 很 方便 , 但 这 也 意味 着 必须 在 传输 文本 内 容 的 同时 也 
传输 很 多 HTML 标签。 有 时 候 ， 我 们 希望 能 够 尽量 少 传输 一 些 数 据 ， 然 后 马上 处 理 这 些 数据 。 在 
这 种 情况 ， 我 们 希望 取得 能 够 通过 JavaScript 进 行 遍 历 的 数据 结构 。 

使 用 jQuery 的 选择 符 可 以 遍历 和 操作 取得 的 HTML 结 构 , 但 是 还 有 一 种 JavaScript 内 置 的 数据 
格式 ， 既 能 减少 数据 传输 量 ， 也 会 减少 编码 量 。 

1. 取得 JSON 

前 面 我 们 曾经 看 到 过 ，JavaScript 对 象 是 由 一 些 “ 键 - 值 ”对 组 成 的 ， 而 且 还 可 以 方便 地 使 
用 花 括 号 ( {} ) 来 定义 。 另 一 方面 ，JavaScript 的 数组 则 可 以 使 用 方 括号 ( [] ) 和 隐 式 声明 的 
逐渐 递增 的 键 进行 动态 定义 。 将 这 两 种 语法 组 合 起 来 ， 可 以 轻松 地 表达 复杂 而 且 庞 大 的 数据 
结构 。 















































GD S 是 synchronous 的 首 字母 ， 即 同步 。 
@) 作者 这 里 的 意思 是 , 如 果 不 是 Ajax, 而 是 SIAX, 即 不 是 异步 加 载 , 而 是 同步 加 载 , 那么 就 不 会 有 那么 大 的 影响 了 。 
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Douglas Crockford 为 这 种 简单 的 语法 起 了 一 个 名 字 ， 叫 做 JSON ( JavaScript Object Notation ， 
JavaScript 对 象 表示 法 )。 通 过 这 种 表示 法 能 够 方便 地 取代 数据 量 庞大 的 XML 格式 : 
{ 


"key": "value", 
"key 2": [ 
"ry 
TO 
"items" 
] 
} 


在 对 象 字 面 量 和 数组 字面 量 的 基础 上 ，JSON 格 式 的 语法 具有 很 强 的 表达 能 力 ， 但 对 其 中 的 
值 也 有 一 定 的 限制 。 例 如 ，JSON 规 定 所 有 对 象 键 以 及 所 有 字符 串 值 ， 都 必须 包含 在 双 引 号 中 。 
而 且 ， 函 数 也 不 是 有 效 的 JSON 值 。 由 于 存在 这 些 限制 ， 开 发 人 员 最 好 不 手工 编辑 JSON ， 而 应 该 
用 服务 器 端 语言 来 生成 。 














2 要 了 解 JSON 的 语法 要 求 以 及 它 有 哪些 优势 ， 都 有 哪些 语言 支持 这 种 数据 格 
忆 式 ， 请 访问 http://json.org/。 





如 果 用 这 种 格式 对 字典 中 的 解释 进行 编码 ,那么 可 能 会 有 很 多 种 编码 方式 。 这 里 , 我们 把 一 
些 字典 的 词 条 放 在 一 个 名 叫 b.json 的 JSON 文 件 中 ， 这 个 文件 开头 部 分 的 代码 如 下 : 


[ 
{ 


"term": "BACCHUS", 

"part": nn， 

"definition": "A convenient deity invented by the...", 
"quote": [ 


"Is public worship, then, a sin,", 
"That for devotions paid to Bacchus", 
"The lictors dare to run us in,", 
"And resolutely thump and whack us?" 
] 


, 
"author": "Jorace" 








}; 
1 
"term": "BACKBITE" 
vot yt 
"definition": "To speak of a man as you find him when..." 
"term": "BEARD", 
"part"™: "™n.", 
"definition": "The hair that is commonly cut off by..." 


}, 


» fileé GoONntinues 。。。 


要 取得 这 些 数 据 ， 可 以 使 用 $ .getJsON() 方 法 ， 这 个 方法 会 在 取得 相应 文件 后 对 文件 进行 
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处 理 。 在 数据 从 服务 器 返回 后 ， 它 只 是 一 个 简单 的 JSON 格 式 的 文本 字符 串 。s$ .getJSsoN () 方 法 
会 解析 这 个 字符 串 ， 并 将 处 理 得 到 的 JavaScript 对 象 提供 给 调用 代码 。 

2. 使 用 全 局 jQuery 函数 

到 目前 为 止 ， 我们 使 用 的 所 有 jQuery 方法 都 需要 通过 s$ () 函数 构建 的 一 个 jQuery 对 象 进行 调 
用 。 通过 选择 符 表达 式 , 我 们 可 以 指定 一 组 要 操作 的 DOM 节 点 ,然后 再 用 这 些 jQuery 方法 以 某 种 
方式 对 它们 进行 操作 。 然而 , $ .getJSON () 函数 却 不 一 样 。 从 逻辑 上 说 , 没有 该 方法 适用 的 DOM 
元 素 ; 作为 结果 的 对 象 只 能 提供 给 脚本 ， 而 不 能 插入 到 页 面 中 。 为 此 ，getJsoN () 是 作为 全 局 
jQuery 对 象 ( 由 jQuery 库 定义 的 jQuery 或 $ 对 象 ) 的 方法 定义 的 ， 也 就 是 说 ， 它 不 是 个 别 jQuery 
对 象 实 例 ( 即 通 过 $ () 函数 创建 的 对 象 ) 的 方法 。 

如 果 JavaScript 中 有 类 似 其 他 面向 对 象 语言 中 的 类 , 那 我 们 可 以 把 $ .getJSON () 称 为 类 方法 。 
为 了 便于 理解 ,我 们 在 这 里 称 其 为 全 局 函数 ; 实际 上 ,为 了 不 与 其 他 函数 名 称 发 生 冲 突 ， 这些 全 
局 函数 使 用 的 是 jQuery 命名 空间 。 

在 使 用 这 个 函数 时 ， 我 们 还 需要 像 以 前 一 样 为 它 传递 文件 名 ， 如 代码 清单 6-3 所 示 。 


代码 清单 6-3 
// 未 完成 的 代码 


$s(document) .ready (function() { 
$('#letter-b a').click(function(event) { 
event .preventDefault(); 
$.getJSON('b.json'); 
jy 
3 


当 单 击 按钮 时 , 我 们 看 不 到 以 上 代码 的 效果 。 因 为 虽然 函数 调用 加 载 了 文件 , 但 是 并 没有 告 
诉 JavaScript 对 返回 的 数据 如 何 处 理 。 为 此 ， 我 们 需要 使 用 一 个 回调 函数 。 

$.getJSON () 函数 可 以 接受 第 2 个 参数 ， 这 个 参数 是 当 加 载 完 成 时 调用 的 函数 。 如 上 所 述 ， 
Ajax 请 求 都 是 异步 的 ， 回 调 函 数 提供 了 一 种 等 待 数 据 返 回 的 方式 ， 而 不 是 立即 执行 代码 。 回 调 函 
数 也 需要 一 个 参数 ， 该 参数 中 保存 着 返回 的 数据 。 因 此 ， 我 们 的 代码 要 写成 代码 清单 6-4 这 样 。 


代码 清单 6-4 
/ /未 完成 的 代码 


$s (document) .ready (function() { 
$('#letter-b a').click(function(event) { 
event .preventDefault(); 
$s.getJSON('b.json', function(data) { 
3 
局 
了 让 学 


我 们 在 此 使 用 了 匿名 函数 表达 式 作为 回调 函数 ， 这 在 jQuery 代码 中 很 常见 ， 主 要 是 为 了 保持 
代码 简洁 。 当 然 ， 对 函数 声明 的 引用 同样 也 可 以 作为 回调 函数 。 

这 样 ， 我 们 就 可 以 在 函数 中 通过 aata 变 量 来 遍历 JSON 数 据 结 构 了 。 具 体 来 说 ， 需 要 迭代 项 
级 数组 ， 为 每 个 项 构建 相应 的 HTML 人 代码。 虽然 可 以 在 这 里 使 用 标准 的 for 循 环 ， 但 我 们 要 借 此 
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机 会 介绍 jQuery 的 另 一 个 实用 全 局 函数 $.each() ， 在 第 5 章 中 ， 我 们 曾 看 到 过 它 的 对 应 方 
法 .each()。$.each() 函数 不 操作 jQuery 对 象 ， 它 以 数组 或 对 象 作为 第 一 个 参数 ， 以 回调 函数 
作为 第 二 个 参数 。 此 外 , 还 需要 将 每 次 循环 中 数组 或 对 象 的 当前 索引 和 当前 项 作为 回调 函数 的 两 
个 参数 ， 参 见 代 码 清 单 6-5。 


代码 清单 6-5 


s(dqocument) .ready (function() { 
$('#letter-b a').click(function(event) { 
event .preventDefault(); 
$s.getJSON('b.json', function(data) { 
Var html = 
$s.each(data, function(entryIndex, entry) { 








html += '<div class="entry">'; 
html += '<h3 class="term">' + entry.term + '</h3>'; 
html += '<div class="part">' + entry.part + '</div>'; 
html += '<div class="definition">'; 
html += entry.definition; 
html += '</div>'y 
html + "</div>":s 
站 
$('#dictionary') .html (htm]l); 6 


J 

这 里 通过 $ .each () 函数 依次 遍历 每 个 项 ， 并 使 用 entry 对 象 的 内 容 构建 起 HTML 人 代码 结构 。 
构建 好 HTML 之 后 ， 通 过 .html () 把 它 插入 到 <div id="dictionary"> 中 ,替换 其 中 原 有 的 所 
有 内 容 。 


mi 





安全 的 HTML 
这 种 方法 要 求 数据 中 包含 可 以 直接 用 来 构建 HTML 的 安全 内 容 , 例如 ,数据 
中 不 能 包含 任何 < 字符 。 





现在 所 剩 的 就 是 处 理 词 条 中 的 引用 语 了 ， 这 需要 使 用 男 一 个 $ .each() 循 环 ， 参见 代 码 清 
单 6-6。 


代码 清单 6-6 


$s (document) .ready (function() { 
$('#letter-b a').click(function(event) { 
event .preventDefault(); 
$s.getJSON('b.json', function(data) { 
war- tml Gs T+ 
$s.each(data, function(entryIndex, entry) { 
html += '<div class="entry">'; 
html += '<h3 class="term">' + entry.term + '</h3>'; 
html += '<div class="part">' + entry.part + '</div>'; 
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html += '<div class="definition">'; 
html += entry.definition; 
if (entry.quote) { 
html += '<div class="quote">'; 
$.each(entry.quote, function(lineIndex, line) { 
html += '<div class="quote-line">' + line + '</div>'; 
}); 
if (entry.author) { 
html += '<div class="quote-author">' + entry.author + '</div>'; 
} 
html += '</div>'; 
} 
html += '</div>'; 
html += '</div>'; 


$s('#dictionary') .html (html) ; 





编写 完 这 些 代码 后 ,就 可 以 单 击 下 一 个 B 链 接 来 验证 我 们 的 成 果 了 ， 如 图 6-4 所 示 ， 页面 右 侧 
出 现 了 相应 的 字典 条 目 。 














The Devil's Dictionary 
by Ambrose Bierce 


A BACCHUS n. 

B A convenient deity invented by the ancients as an excuse for getting drunk. 
5 ls public worship, then, a sin, 

c That for devotions paid to Bacchus 

一 The lictors dare to run us in, 

D And resolutely thump and whack us? 








Jorace 





图 6-4 


尽管 JSON 格 式 很 简洁 ， 但 它 却 不 容许 任何 错误 。 所 有 方 括号 、 花 括号 、 引 号 和 逗号 都 必须 
合理 且 正 确 地 使 用 ， 否 则 文件 不 会 加 载 。 而 且 , 在 多 数 浏览 器 中 ， 当 文件 加 载 失败 时 我 们 看 不 到 
任何 错误 信息 ; 脚本 只 是 静默 地 彻底 终止 运转 。 

3. 执行 脚本 

有 时 候 , 在 页 面 初次 加 载 时 就 取得 所 需 的 全 部 JavaScript 也 是 没有 必要 的 。 具体 需要 取得 哪个 
脚本 ， 要 视 用 户 的 操作 而 定 。 虽 然 可 以 在 需要 时 动态 地 引入 <script> 标 签 ， 但 注入 所 需 代 码 的 
更 优雅 的 方式 则 是 通过 jQuery 直接 加 载 .js 文件 。 

ee 与 加 载 HTML 片段 一 样 简单 。 但 在 这 种 情况 下 ， 需 要 使 用 全 局 函数 
$.getScript() ， 这 个 全 局 函数 与 它 的 同辈 函数 类 似 ， 接 受 一 个 URL 参 数 以 查找 脚本 文件 ， 参 
Wi 
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代码 清单 6-7 


$s (document) .ready (function() { 
$('#letter-c a').click(function(event) { 
event .preventDefault(); 
s.getscript('c.jJs"'); 
过 
二 


在 前 一 个 例子 中 ， 接 下 来 要 做 的 应 该 是 处 理 结果 数据 ， 以 便 有 效 地 利用 加 载 的 文件 。 然 而 ， 
对 于 一 个 脚本 文件 来 说 ， 这 个 过 程 是 自动 化 ; 换 名 话说， 脚本 会 自动 执行 。 

以 这 种 方式 取得 的 脚本 会 在 当前 页 面 的 全 局 环境 下 执行 。 这 意味 着 脚本 有 权 访 问 在 全 局 环境 
中 定义 的 函数 和 变量 , 当然 也 包括 jQuery 自身 。 因而 ,我们 可 以 模仿 JSON 的 例子 来 准备 脚本 代码 ， 
以 便 在 脚本 执行 时 将 HTML 插 入 到 页 面 中 。 现 在 ,将 以 下 脚本 代码 保存 到 cjs 中 : 


Var entries = [ 


{ 














"term": "CALAMITY", 
art se mr 
"definition": "A more than commonly Plain and..." 
}; 
{ 
"term": "CANNIBAL", 
"art Wr 
"definition": "A gastronome of the old school who..." 
}; 
{ 
"term": "CHILDHOOD", 
Oat Mi 
"definition": "The period of human life intermediate..." 
} 
/ /省略 的 内 容 
] 5 
Var html = "" 


$s.each(entries, function() { 
html += '<div class="entry">'; 
html += '<h3 class="term">' + this.term + '</h3>'; 
html += '<div class="part">' + this.part + '</div>'; 
html += '<div class="definition">' + this.definition + '</div>'; 
html += '</div>'; 


}); 





$('#dictionary') .htm]l (html); 


最 后 ， 单 击 C 链 接 ， 应 该 会 看 到 我 们 预期 的 结果 。 





6.1.3 ”加 载 XML 文 档 
XMIL 是 缩写 词 Ajax 中 的 一 部 分 ， 但 我 们 至 今 还 没有 谈 到 加 载 XML 文 档 。 加 载 XML 文 档 很 简 
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单 ， 而 且 与 JSON 技 术 也 相当 接近 。 首先， 需要 将 希望 显示 的 数据 包含 在 一 个 名 为 dxml 的 XMI 文 
件 中 ; 


<?xml version="1.0" encoding="UTF-8"?> 
<entries> 
<entry term="DEFAME" part="Vv.t."> 
<definition> 
To lie about another. To tell the truth about another. 
</definition> 
</entry> 
<entry term="DEFENCELESS" part="adj."> 
<definition> 
Unable to attack. 
</definition> 
</entry> 
<entry term="DELUSION" part="n."> 
<definition> 
The father of a most respectable family, comprising 
Enthusiasm, Affection, Self-denial, Faith, Hope, 
Charity and many other goodly sons and daughters. 
</definition> 
<quote author="Mumfrey Mappel"> 
<line>All hail, Delusion! Were it not for thee</line> 
<line>The world turned topsy-turvy we should see; 
</line> 
<line>For Vice, respectable with cleanly fancies, 
</line> 
<line>Would fly abandoned Virtue's gross advances. 
</line> 
</quote> 
</entry> 
</entries> 


当然 ， 通 过 XML 来 表示 这 些 数据 的 形式 有 很 多 种 ， 而 其 中 一 些 能 够 非常 近似 地 模仿 我 们 已 
经 确定 的 HTML 结 构 或 者 前 面 使 用 的 JSON。 不 过 ， 这 里 我 们 示范 了 XML 的 一 些 更 方便 阅读 的 特 
隆 ， 例 如 使 用 属性 term 和 part， 而 不 是 标签 。 

下 面 以 我 们 熟悉 的 方式 开始 编写 函数 ， 参 见 代 码 清单 6-8。 


代码 清单 6-8 
// 未 完成 的 代码 


$s (document) .ready (function() { 
$('#letter-d a').click(function(event) { 
event .preventDefault(); 
$s.get('d.xml', function(data) { 












































这 次 ， 帮 助 我 们 完成 任务 的 是 $ .get () 函数 。 通 常 ， 这 个 函数 只 是 取得 由 URL 指 定 的 文件 ， 
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然后 将 纯 文 本 格式 的 数据 提供 给 回调 函数 。 但 是 ， 在 根据 服务 器 提供 的 MIME 类 型 知道 响应 的 是 
XML 的 情况 下 ， 提 供给 回调 函数 的 将 是 XML DOM 树 。 

好 在 , 我 们 已 经 领略 过 了 jQuery 强大 的 DOM 遍 历 能 力 。 遍历 XML 文 档 的 方式 同 HTML 文 档 一 
样 ， 也 可 以 使 用 常规 的 .finda() 、.filter() 及 其 他 遍历 方法 ， 参 见 代 码 清单 6-9。 


代码 清单 6-9 


$s (document) .ready (function() { 
$('#letter-d a').click(function(event) { 
event .preventDefault(); 
$s.get('d.xml', function(data) { 
$('#dictionary') .empty (); 
s(data) .find('entry') .each (function() { 

Var Sentry = $(this); 

Var html = '<div class="entry">'; 

html += '<h3 class="term">' + Sentry.attr('term’'); 
html += '</h3>'; 

html += '<div class="part">' + Sentry.attr('part'); 
html += '</div>'; 

html += '<div class="definition">'; 

html += $entry.find('definition').text(); 

var Squote = $entry.find('quote'); 

if (Squote.length) { 
html += '<div class="quote">'; 
$sSquote.find('line') .each (function() { 

html += '<div class="quote-line">'; 
html += $ (this) .text() + '</div>'; 











}3 
if (S$quote.attr('author')) { 
html += '<div class="gquote-author">'; 
html += Squote.attr('author') + '</div>'; 

} 

html += '</div>'; 
} 
html += '</div>'; 
html += '</div>'; 
$s('#dictionary') .append ($s (htm]l)); 


由 

这 样 ， 当 单 击 D 链 接 时 ， 也 可 以 得 到 预期 的 效果 ， 如 图 6-5 所 示 。 

这 是 我 们 已 知 的 DOM 遍 历 方法 的 新 用 途 ， 而且 ,jQuery 对 CSS 选 择 符 支持 的 灵活 性 由 此 也 可 
见 一 斑 。CSS 的 选择 符 语法 一 般 适 合 美化 HTML 页 面 ,位 于 标准 .css 文 件 中 的 选择 符 ,如 aiv 和 boay 
等 标签 名 都 是 为 了 在 HTML 中 找到 内 容 。 然 而 ,jQuery 可 以 使 用 任意 XML 标签 名 , 如 这 里 的 entry 
和 difinition， 就 和 使 用 标准 HTML 标签 一 样 方便 。 

jQuery 内 部 先进 的 选择 符 引 擎 ， 对 于 在 更 复杂 的 情况 下 查找 XML 文档 中 的 元 素 同 样 很 有 帮 
助 。 例 如 ,假设 我 们 想 把 显示 的 内 容 限 定 为 那些 带 有 引用 进而 带 有 作者 属性 的 词 条 。 那 么 , 通过 
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将 entry 修 改 为 entry :has (quote) 就 可 以 把 词 条 限定 为 必须 包含 媒 套 的 引用 元 素 。 然后, 还 可 
以 通过 entry :has (quote[author]) 进 一 步 限 定 词 条 中 的 引用 元 素 必 须 包含 author 属 性 。 























The Devil's Dictionary 
by Ambrose Bierce 


A DANCE vi 
To leap about to the sound of tittering music, preferably with arms about your neighbors wife or 
B daughter There are many kinds of dances, but all those requiring the participation of the two 
sexes have two characteristics in common: they are conspicuously innocent ang warmly loved by 
C the vicious. 
D 














图 6-5 

这 样 ， 代 码 清单 6-9 中 带 有 初始 选择 符 的 代码 行 应 该 写成 : 

s(data) .find('entry:has (quote[lauthor])').each(function() { 

由 图 6-6 可 以 看 出 ， 新 的 选择 符 表达 式 对 返回 的 词 条 进行 了 适当 的 限制 。 


The Devil's Dictionary 
by Ambrose Bierce 








A DEBT n. 

所 An ingenious substitute for the chain and whip of the slave-driver. 
二 As, pent in an aquarium, the troutiet 

C Swims round and round his tank to find an outlet, 

2 Pressing his nose againstthe glass that holds him, 

D Nor ever sees the prison that enfolds him; 


So the poor debtor, seeing naught around him, 

Yet feels the narrow limits that impound him, 

Grieves at his debt and studies to evade it, 

And finds at last he might as well have paid it. 
Barlow 
S. Vode 














图 6-6 


6.2 选择 数据 格式 


我 们 已 经 看 到 了 4 种 外 部 数据 的 格式 ,每 种 格式 都 可 以 通过 jQuery 本 地 的 Ajax 函 数 加 以 处 理 。 
而 且 , 我 们 也 亲自 验证 了 这 4 种 格式 都 能 够 用 来 方便 地 处 理 任务 ,在 用 户 请 求 它 时 而 不 是 之 前 ) 
将 信息 加 载 到 现 有 的 页 面 上 。 那 么 , 当 确 定 在 应 用 程序 中 使 用 哪 种 格式 时 ,应 该 考虑 什么 因素 呢 ? 

HTML 片 段 实 现 起 来 只 需要 很 小 的 工作 量 。 这 种 格式 的 外 部 数据 可 以 通过 一 种 简单 的 方法 加 
载 并 插入 到 页 面 中 ,甚至 连 回调 函数 都 不 必 使 用 。 也 就 是 说 ,对 于 将 新 HTML 添 加 到 现 有 页 面 中 
的 简单 任务 来 说 ,无需 遍历 数据 。 但 男 一 方面 , 这 种 数据 的 结构 方式 却 不 一 定 能 够 在 其 他 应 用 程 
序 中 得 到 重用 ， 因 为 这 种 外 部 文件 与 它们 的 目标 容器 必须 紧密 结合 。 
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JSON 文 件 的 结构 使 它 可 以 方便 地 被 重用 。 而 且 ， 它 们 非常 简洁 ， 也 容易 阅读 。 这 种 数据 结 
构 必 须 通过 遍历 来 提取 相关 信息 , 然后 再 将 信息 呈现 到 页 面 上 , 不 过 通过 标准 的 JavaScript 技 术 就 
能 做 到 这 一 点 。 由 于 现代 浏览 器 调用 原生 的 JsoN.parse () 就 能 解析 这 种 格式 的 文件 ,所 以 读 取 
JSON 文 件 的 速度 非常 快 。 另 外 ，JSON 文 件 中 的 错误 可 能 会 导致 页 面 上 的 脚本 静默 地 中 止 运行 ， 
甚至 还 会 带 来 其 他 的 负面 影响 。 因 此 ， 这 种 数据 必须 由 信得过 的 人 仔细 构建 。 

JavaScript 文 件 能 够 提供 极 大 的 灵活 性 ， 但 它 却 不 是 一 种 真正 的 数据 存储 机 制 。 因 为 这 种 文 
件 针对 特定 的 语言 ， 所 以 不 能 通过 它们 将 同样 的 信息 提供 给 完全 不 同 的 系统 。 然 而 ， 能 够 加 载 
JavaScript, 则 意味 着 可 以 将 很 少 用 到 的 行为 提取 到 外 部 文件 中 , 从 而 在 加 载 该 文件 之 前 有 效 地 减 
少 页 面 中 的 代码 量 。 

虽然 JavaScript 开 发 人 员 更 钟爱 JSON ， 导 致 XML 已 经 有 些 失宠 ,但 以 这 种 格式 提供 可 重用 的 
数据 仍然 还 是 很 常见 的 。 的 确 ， 很 多 流行 的 Web 服 务 ( 比如 Yahoo! Weather: http://developer. 
yahoo.com/weather ) 都 以 XML 格式 输出 它们 的 数据 ， 从 而 催生 了 使 用 它们 数据 的 很 多 有 价值 的 
Mashup 应 用 "。 不 过 ，XML 格 式 的 文件 体积 相对 较 大 ， 所 以 同 其 他 文件 格式 相 比 ， 解 析 和 操作 它 
们 的 速度 要 慢 一 些 。 
通过 以 上 对 各 种 数据 格式 优 缺 点 的 分 析 , 我 们 知道 在 不 需要 与 其 他 应 用 程序 共享 数据 的 情况 
下 ,， 以 HTML 片段 提供 外 部 数据 一 般 来 说 是 最 简单 的 。 如 果 数 据 需要 重用 ， 而 且 其 他 应 用 程序 也 
可 能 因此 受到 影响 ， 那 么 在 性 能 和 文件 大 小 方面 具有 优势 的 JSON 通 党 是 不 错 的 选择 。 而 当 远 程 
应 用 程序 未 知 时 ，XML 则 能 够 为 良好 的 互 操作 性 提供 最 可 靠 的 保证 。 

最 后 一 个 要 考虑 的 问题 是 , 数据 是 否 已 经 可 以 使 用 。 如 果 是 , 那么 这 几 种 格式 都 可 能 成 为 首 
选 ， 关键 是 作出 最 适合 我 们 需求 的 决定 。 


6.3 向 服务 器 传递 数据 
此 前 ， 我 们 的 例子 都 是 从 Web 服 务 器 上 取得 静态 的 数据 文件 。 然 而 ，Ajax 的 价值 只 有 当 服 务 


器 能 够 基于 浏览 器 的 输入 动态 形成 数据 时 才能 得 到 充分 体现 。 在 这 种 情况 下 ,jQuery 同样 也 能 为 
我 们 提供 帮助 ;前 面 介 绍 的 所 有 方法 在 经 过 修改 之 后 ， 都 可 以 实现 双向 的 数据 传送 。 

























































































与 服务 器 端 代码 交互 
由 于 示范 这 些 技术 需要 同 Web 服 务 器 进行 交互 , 因此 我 们 这 里 将 首次 用 到 服 
> 务 器 端 代码 。 在 给 定 的 例子 中 ,我 们 使 用 PHP 脚 本 编程 语言 ， 该 语言 使 用 非常 普 
遍 而 且 能 够 免费 取得 。 不 过 ， 我 们 不 会 在 这 里 介绍 如 何 设置 支持 PHP 的 Web 服 务 
器 ， 只 是 建议 大 家 考虑 XAMPP ， 下 载 地 址 为 : http:/www.apachefriends. 
org/en/xampp.html， 这 个 包 可 以 帮 你 迅速 建立 Web 服 务 器 。 























G@ Mashup 应 用 ， 指 利用 几 个 相关 或 不 相关 的 网 站 提供 的 API， 将 相应 网 站 提供 的 内 容 直接 或 经 过 适当 地 加 工 之 后 整 
合 显示 在 自己 的 网 站 中 。 
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6.3.1 执行 GET 请 求 


为 了 示范 客户 端 (使 用 JavaScript ) 与 服务 器 ( 在 我 们 这 个 例子 中 使 用 PHP ) 之 间 的 通信 ， 
们 要 编写 一 个 基于 每 次 请 求 只 向 浏览 器 发 送 一 个 字典 词 条 的 脚本 。 词 条 的 选择 取决 于 从 浏览 器 发 
送 到 服务 器 的 参数 。 服 务 器 端 脚本 将 从 如 下 内 部 数据 结构 中 提取 相应 的 数据 : 


<?php 
Sentries = array( 
'EAVESDROP' => arrayl( 
PATET, sy Ly, 
'definition' => 'Secretly to overhear a catalogue of the 
crimes and vices of another or yourself.', 
'quote' => arrayl( 
'A lady with one of her ears applied', 
'To an open keyhole heard, inside,', 
'Two female gossips in converse free &mdash;', 
'The subject engaging them was she.' 
"I think," said one, "and my husband thinks', 
'That she\'s a prying, inquisitive minx!"', 
'As soon as no more of it she could hear', 
'The lady, indignant, removed her ear.', 
'"I will not stay," She said, with a pout,', 
'"To hear my character lied about!"', 

















) ， 
'author' => 'Gopete Sherany ' ， 
) ， 
EDIBLE' => array( 
part" = "dj 
'definition' => 'Good to eat, and wholesome to digest, as 
a worm to a toad, a toad to a snake, a snake to a pig, 
a pig to a man, and a man to a worm.', 











) ， 
// and so on 
) 


在 这 个 例子 的 产品 版 中 , 这些 数据 可 能 会 保存 在 数据 库 中 ,并 基于 每 次 请 求 加 载 相应 的 数据 。 
这 里 ， 由 于 我 们 把 数据 直接 放 在 了 脚本 中 ， 因此 取得 数据 的 代码 非常 直观 。 首 先 要 对 通过 请 求 发 
送 的 数据 进行 检查 ， 然 后 再 构建 返回 给 浏览 器 显示 的 HTML 片 段 : 
<?Dhp 
if (isset ($entries[strtoupper($ REQUEST['term'])])) { 
$sterm = strtoupper($_ REQUEST['term']); 


Sentry = $entries[$term]; 
echo build entry($term, S$entry); 












































} else { 

echo '<div>Sorry, your term was not found.</div>'; 
} 
function build entry($term, Sentry) { 

shtml = '<div class="entry">'; 

$shtml .= '<h3 class="term">'; 
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$html .= $term; 
Shtml = </h3'y 
Shtml = ‘div lass= "pAart">'; 
shtml .= $entry['part']; 
SHEm1 .</ALyS ;> 
shtml .= '<div class="definition">'; 
shtml .= $entry['definition']; 
if (isset(S$entry['gquote'])) { 
foreach ($entry['quote'] as S$line) { 
$shtml .= '<div class="quote-line">'. $line .'</div>'; 
} 
if (isset($Sentry['author'])) { 
$shtml .= '<div class="quote-author">'. 
sentry['author'] .'</div>'; 
} 
} 
Shtml .= “</div>"; 
SHEmL 全 用 /人 GET 





return $html; 
6 


这 样 ， 当 我 们 调用 e.php 来 请 求 这 个 脚本 时 ， 它 就 会 根据 GET 请 求 的 参数 返回 相应 的 HTML 
片段 。 例 如 ， 在 使 用 e .php?term=eavesdrop 请 求 这 个 脚本 时 ， 会 得 到 如 图 6-7 所 示 的 HTML 
片段 。 





EAVESDROP 


vy 

Secretly to overhear a catalogue of the crimes and vices of another or yourself. 
A lady with one of her ears applied 

To an open keyhole heard, inside, 

Two female gossips in converse free 一 
The subject engaging them Was she. 

"I think," said one, "and my husband thinks 
That she's a prying, inquisitive minx!" 

As soon as no more of it she could hear 
The lady, indignant, removed her ear. 

"IT will not stay," she said, with a pout, 

"To hear my character lied about!" 

Gopete Sherany 











图 6-7 


同样 ， 这 与 我 们 在 本 章 前 面 曾 经 看 到 过 的 HTML 片段 一 样 ， 由 于 还 没有 应 用 CSS 规 则 ， 所 以 
返回 的 HTML 片段 也 缺少 应 有 的 样式 。 
由 于 我 们 要 展示 如 何 向 服务 器 传送 数据 , 所 以 这 里 不 再 借助 一 直 沿 用 的 独立 按钮 ， 而 是 使 用 
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另外 一 种 方式 请 求 词 条 





构建 一 个 由 要 查询 的 词语 组 成 的 链接 列表 , 通过 单 击 其 中 任何 一 个 链 


接 ， 来 加 载 相应 的 解释 。 下 面 是 要 添加 到 主页 面 中 的 HTML 代 码 : 


id="letter-e"> 


<div class="letter' 


<h3>E</h3> 
ll 
<li><a hre 





<li><a hre 
<li><a hre 
<li><a hre 
<l1i><a hre 


ooono n 


<li><a hre 
</1i> 
<li><a href 
<l1i><a href 
<l1i><a href 
<l1i><a href 





下 本 本本 上 
Dnnn no 


<li><a href 
</ul> 
</div> 





.php?term= 
.php?term= 
.php?term= 
.php?term= 
.php?term= 
.php?term= 


.php?term= 
.php?term= 
.php?term= 


Eavesdrop">Eavesdrop</a></1i> 
Edible">Edible</a></1i> 
Education">Education</a></1i> 
Eloquence">Elogquence</a></1i> 
Elysium">Elysium</a></1i> 
Emancipation">Emancipation</a> 











Emotion">Emotion</a></1i> 
Envelope">Envelope</a></1i> 








Envy">Envy</a></1i> 





.php?term= 
.php?term= 





Epitaph">Epitaph</a></1i> 
Evangelist">Evangelist</a></1i> 











接 下 来 ， 要 通过 JavaScript 代 码 以 正确 的 参数 来 调用 前 面 的 PHP 肢 本。 虽然 可 以 使 用 常规 
的 .1o0ad() 机 制 在 URL 后 面 添 加 查询 字符 串 ， 即 通过 类 似 e .php?term=eavesdrop 这 样 的 地 址 























串 ， 参 见 代码 清单 6-10。 


代码 清单 6-10 


$s (document) .ready (function() 
$('#letter-e a').click(function(event) { 
event .preventDefault(); 
Var requestData = {term: 


$.get('e.php', 


) 
})y 
})3 














直接 取得 数据 。 但 是 ， 在 此 我 们 想 让 jQuery 基于 我 们 提供 给 $ .get () 函数 的 对 象 来 构建 查询 字符 


{ 


s(this).text()}; 


requestData, function(data) { 
$s('#dictionary') .html (data); 


前 面 我 们 已 经 看 到 过 jQuery 提供 的 其 他 Ajax 接口 了 ， 因 此 对 这 个 函数 的 使 用 也 应 该 熟悉 。 其 


中 唯一 的 差别 是 第 二 个 参数 , 该 参数 是 一 个 用 来 构建 查询 字符 串 的 键 和 值 的 对 象 。 在 这 个 例子 中 ， 
键 始终 是 term， 而 值 则 取 自 每 个 链接 的 文本 。 现 在 ， 单 击 列表 中 的 第 一 个 链接 会 导致 相应 词语 
的 解释 出 现在 页 面 中 ， 如 图 6-8 所 示 。 

值得 一 提 的 是 , 列表 中 的 链接 无 论 有 无 代码 使 用 它们 都 已 经 带 有 了 给 定 的 地 址 。 这样， 就 为 
禁用 了 或 者 无 法 使 用 JavaScript 的 用 户 提 供 了 查询 相关 信息 的 替代 方法 (这 也 是 一 种 渐进 增强 的 
做 法 )。 但 在 正常 情况 下 ， 为 了 防止 单 击 这 些 链接 时 打开 新 URL ， 我 们 在 事件 处 理 程序 中 调用 
了 .preventDefault() 方 法 。 























网 
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The Devil's Dictionary 
by Ambrose Bierce 
A EAVESDROP wi 
Secretly to overhear a catalogue of the crimes and vices of another 
B or yourself. 
C A lady with one of her ears applied 
To an open keyhole heard, inside, 
Two female gossips in converse free 一 
D The subject engaging them was she. 
"| think,” sald one, "and my husband thinks 
E That she's a prying, inquisitive minx!" 
As soon as no more of it she could hear 
Eavesdrop The lady, indignant, removed her ear. 
Edible "| will not stay,” she said, with a pout, 
Education "To hear my character lled aboutl" 
Eloguence Gopete 
Elysium Sherany 
Emancipation 
区 rmmti 








返回 false 还 是 阻止 默认 动作 

在 本 章 的 click 处 理 程序 中 ， 我 们 传 入 了 event 对 象 并 使 用 event . 
preventDefault () 而 不 是 return false 结 束 该 处 理 程序 。 当 默认 动作 是 重新 
> 加 载 页 面 或 打开 新 页 面 时 ,我 们 推荐 这 种 做 法 。 例如 ， 如 果 c1lick 处 理 程序 中 包 
含 JavaScript 错 误 ， 那 么 在 第 一 行 代 码 中 ( 在 碰 到 错误 之 前 ) 阻止 默认 动作 就 能 
确保 不 会 提交 表单 ， 而 且 浏 览 器 的 错误 控制 台 也 会 收 到 错误 报告 。 第 3 章 曾 介绍 
过 ，return false 意 味 着 同时 调用 event.preventDefault() 和 event . 

stopPropagation()。 因 此 要 想 停止 事件 冒 泡 ， 我 们 还 得 再 调用 后 者 。 





6.3.2 执行 PosT 请 求 


使 用 posT 方 法 与 使 用 GET 方法 的 HTTP 请 求 几乎 是 一 样 的 。 从 视觉 上 来 看 ， 它 们 之 间 一 个 最 
大 的 区 别 就 是 cET 请 求 把 参数 放 在 作为 URL 一 部 分 的 查询 字符 串 中 ， 而 PosT 请 求 则 不 是 。 但 是 ， 
在 Ajax 请 求 中 ， 即 使 是 这 种 区 别 对 一 般 用 户 而 言 也 是 不 可 见 的 。 通 常 ， 决定 使 用 哪 种 方法 的 唯一 
理由 就 是 遵照 服务 器 端 代码 的 约定 ,或 者 要 传输 大 量 的 数据 一 一 GET 方 法 对 传输 的 数据 量 有 更 严 
格 的 限制 。 由 于 我 们 编写 的 PHP 代 码 能 够 妥善 地 处 理 任何 一 种 方法 发 送 的 请 求 ,， 因 此 只 需 改 变调 
用 的 jQuery 函数 ， 就 可 以 在 GET 和 PosT 之 间 进 行 转 换 ， 参 见 代 码 清 单 6-11。 


代码 清单 6-11 


$s (document) .ready (function() { 
$('#letter-e a').click(function(event) { 
event .preventDefault(); 
Var requestData = {term: $ (this).text()}; 
$.post('e.php', requestData, function(data) { 
$s('#dictionary') .html (data); 














网 
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泪 








虽然 参数 相同 ， 但 这 里 的 请 求 是 通过 PosT 方 法 发 送 的 。 而 通过 使 用 . 1oad ( ) 方法 还 可 以 进 
一 步 简化 这 些 代 码 ， 因 为 .1oad () 方 法 在 接收 到 包含 数据 的 对 象 参数 时 ， 会 默认 使 用 PosT 方 法 
发 送 请 求 ， 参 见 代 码 清单 6-12。 


代码 清单 6-12 


s(dqocument) .ready (function() { 
$('#letter-e a').click(function(event) { 
event .preventDefault(); 
Var requestData = {term: $ (this).text()}; 
$s('#dictionary') .load('e.php', requestData); 
证 
} 


当 单 击 链接 时 ， 这 个 缩减 版 的 函数 仍然 能 起 到 相同 的 作用 ， 如 图 6-9 所 示 。 


























The Devil's Dictionary 
by Ambrose Bierce 
A EAVESDROP vi. 
Secretly to overhear a catalogue of the crimes and vices of another 
B or yourself. 
C A lady with one of her ears applied 
| To an open keyhole heard, inside, 
D Two female gossips in converse free 一 
芋 The subject engaging them was she. 
"| think,” said one, "and my husband thinks 
E That she's a prying, inquisitive minx!" 
As soon as no more of ft she could hear 
Eavesdrop The lady, indignant, removed her ear. 
Edible "| will not stay,” she said, with a pout, 
Education "To hear my character lied about!” 
Eloquence Gopete 
Elysium Sherany 
Emancipation 
Ematian 








图 6-9 


6.3.3 ”序列 化 表单 


向 服务 带 发 送 数据 经 常会 涉及 用 户 填写 表单 。 带 规 的 表单 提交 机 制 会 在 整个 浏览 需 窗 口中 加 
载 响应 ， 而 使 用 jQuery 的 Ajax 工具 箱 则 能 够 异步 地 提交 表单 ， 并 将 响应 放 到 当前 页 面 中 。 
为 了 试验 ， 需 要 构建 一 个 简单 的 表单 : 


<div class="letter" id="letter-f"> 


<h3>F</h3> 
<form action="f.php"> 
<input type="text" name="term" value="" id="term" /> 


<input type="submit" name="search" value="search" 
id="search" /> 
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</form> 
</div> 


这 一 次 ， 需 要 把 提供 的 搜索 词语 作为 字典 中 词 条 的 子 字符 串 来 搜索 ,并 从 PHP 脚 本 中 返回 一 
组 词 条 。 我 们 将 使 用 e.php 中 的 builg_entry () 函数 返回 与 前 面相 同 的 数据 结构 ， 但 在 fphp 中 稍 
微 修改 一 下 相应 的 逻辑 : 


<?php 
$output = array(); 
foreach ($entries as Sterm => Sentry) { 
if (strpos($term, strtoupper($ REQUEST['term'])) !== FALSE) { 
Soutput [] = build entry($term, Sentry); 
} 
} 








if (!empty($output)) { 
echo implode("\n", $output); 


} else { 
echo '<div class="entry">Sorry, no entries found for ' 
echo '<strong>' . $_ REQUEST['term'] . '</strong>.'; 











echo '</div>'; 
} 


2 


其 中 ,调用 的 strpos () 函数 会 扫描 与 提供 的 搜索 字符 串 匹 配 的 单词 。 接 下 来 ， 我 们 可 以 通 
过 遍历 DOM 树 来 响应 表单 提交 并 构造 适当 的 查询 字符 串 ， 如 代码 清单 6-13 所 示 。 


代码 清单 6-13 


s(dqocument) .ready (function() { 
$('#letter-f form') .submit (function(event) { 
event .preventDefault(); 
$s.get('f.php', {'term': $('input[lname="term"]').val()}, 
function(data) { 
$s('#dictionary') .html (data); 

















> 
})3 


虽然 以 上 代码 能 够 实现 预期 的 效果 , 但 通过 名 称 属性 逐个 搜索 输入 字段 并 将 字段 的 值 添加 到 
对 象 中 总 是 有 点 麻烦 。 特 别 是 随 着 表单 变 得 更 复杂 ， 这 种 方法 也 会 明显 变 得 缺乏 扩展 性 。 好 在 ， 
jQuery 为 这 种 常用 的 操作 提供 了 一 种 简化 方式 一 一 .serialize() 方 法 。 这 个 方法 作用 于 一 个 
jQuery 对 象 ， 将 匹配 的 DOM 元 素 转换 成 能 够 随 Ajax 请 求 传递 的 查询 字符 串 。 通 过 使 
用 .serialize() 方 法 ， 可 以 把 前 面 的 提交 处 理 程 序 一 般 化 为 如 代码 清单 6-14 所 示 。 


代码 清单 6-14 


$s (document) .ready (function() { 
$('#letter-f form').submit (function(event) { 
event .preventDefault(); 
var formVvalues = $(this).serialize(); 
$s.get('f.php', formValues, function(data) { 
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$('#dictionary') .html (data); 





这 样 ， 即 使 在 增加 表单 中 字段 的 情况 下 ,同样 的 脚本 仍然 能 够 用 于 提交 表单 。 例 如 ， 如 果 我 
们 搜索 “fid”， 就 会 出 现 包含 这 个 子 字符 串 的 词 条 ， 如 图 6-10 所 示 。 








The Devil's Dictionary 
by Ambrose Bierce 


Eavesdrop FIDELITY n. 
Edlble 

Education 
onca 











: 


A FIDDLE 六 
An instrument to tickle human ears by friction of a horse's tail on the 
B entralls of a cat. 
To Rome said Nero: "If to smoke you tum 
C 1shall not cease to fiddle while you burn." 
To Nero Rome replied: "Pray do your worst, 
D Tis my excuse that you were fiddling first." 
Orm Pludge 
E 


A virtue peculiar to those who are about to be betrayed. 








图 6-10 


6.4 为 Ajax 请 求 提 供 不 同 的 内 容 


在 返回 HTML 数 据 的 情况 下 , 我 们 知道 如 果 只 让 浏览 器 自己 打开 页 面 而 不 使 用 JavaScript, 那 
么 没有 样式 的 文档 片段 会 很 难看 。 为 了 给 没有 JavaScript 用 户 提供 比 这 里 更 好 的 体验 , 可 以 有 条 件 
的 加 载 包含 <hntml>、<nead> 和 <body> 以 及 其 他 所 有 内 容 的 完整 的 页 面 。 为 些 , 就 要 利用 jQuery 


随同 Ajax 请 求 一 起 发 送 的 请 求 头 部 。 在 服务 器 端 代 码 〈 这 里 











是 PHP ) 中 ， 我 们 需要 检查 


X-Reduested- With 头 部 。 如 果 存 在 这 个 头 部 而 且 它 的 值 为 XMLHEtpRedquest， 那 么 就 会 只 发 
送 文档 片段 ; 否则 ， 就 发 送 完整 的 文档 。 下 面 是 这 个 想法 的 基本 实现 。 




















<?php 
Sajax = isset($_ SERVER['HTTP_ X REQUESTED WITH']) && 
$_SERVERI['HTTP_ X_ REQUESTED_ WITH'] == 'XMLHttpRequest'; 


























EE (Sajax)s 
// 不 是 Ajax 请 求 ， 输 出 <head> 及 开始 的 <boby> 标 签 
> 

<IDOCTYEE HIML> 

<html lang="en"> 





<head> 
<!-- title, meta, link elements --> 
</head> 
<body> 
<!-- page heading, form, etc. --> 
<?php 
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enQif; 


// 对 Ajax 及 非 Ajax 显 示 相 同 内 容 


if (!$ajax): 
// 关 闭 针 对 非 Ajax 请 求 的 <div>、<boby> 和 <html> 标 签 


和 


</body> 

</html> 

<?php endif,; ?> 

现在 , 我 们 就 有 了 一 个 真正 渐进 增强 的 例子 。 没有 JavaScript 的 用 户 也 可 以 看 到 可 用 的 表单 及 
有 样式 的 结果 ， 而 那些 能 使 用 JavaScript 的 用 户 则 可 以 得 到 更 好 的 体验 。 

这 种 在 服务 器 端 提 供 不 同 内 容 的 技术 甚至 支持 区 别 更 大 的 情况 。 例 如 , 可 以 对 Ajax 请 求 返回 
JSON 数 据 ， 而 对 其 他 请 求 返 回 HTML: 

<?php 


Sajax = isset($_SERVER['HTTP_ X REQUESTED_WITH']) && 
$_SERVER['HTTP_X_ REQUESTED WITH'] == 'XMLHttpRequest'; 





















































// 设 置 Sentries 数 组 


if (Sajax) { 
header ('Content-type: application/json'); 
echo json encode(s$sentries); 

} 

else { 
// 输 出 完整 的 HTML 文 档 

} 


这 样 传输 的 数据 就 少 多 了 ， 但 在 客户 端 必须 构建 HTML ， 就 像 在 代码 清单 6-9 中 所 做 的 那样 。 
6.5 ”关注 请 求 


到 现在 为 止 ,我 们 已 经 学 习 了 如 何 调用 Ajax 方法 ,并 且 始 终 都 在 处 理 响 应 。 然 而 ， 有 时 候 多 
了 解 一 些 调用 Ajax 方法 过 程 中 的 HTTP 请 求 也 会 给 我 们 带 来 方便 。 为 满足 这 种 需求 ，jQuery 提 供 
了 一 组 函数 ， 通 过 它们 能 够 为 各 种 与 Ajax 相关 的 事件 注册 回调 函数 。 

其 中 ，.ajaxStart() 和 .ajaxStop () 方 法 就 是 这 些 “ 观 察 员 ”函数 中 的 两 个 例子 , 可 以 把 
它们 添加 给 任何 jQuery 对 象 。 当 Ajax 请 求 开始 上 且 尚未 进行 其 他 传输 时 ， 会 触发 .ajaxSstart () 的 
回调 函数 。 相 反 ， 当 最 后 一 次 活动 请 求 终 止 时 ， 则 会 执行 通过 .ajaxstop () 注 册 的 回调 函数 。 
所 有 这 些 “ 观 察 员 ”都 是 全 局 性 的 ， 因 为 无 论 创 建 它们 的 代码 位 于 何 处 ， 当 Ajax 通信 发 生 时 都 需 
要 调用 它们 。 而 且 这 些 方法 都 与 .ready () 方 法 一 样 ， 只 能 由 $ (aocument ) 调用 。 

在 网 络 连接 的 速度 比较 慢 时 ， 可 以 通过 这 些 方法 为 用 户 提供 一 些 反 馈 。 页 面 中 用 作 反 馈 的 
HTML 可 以 包含 适当 的 Loading..…( 加载 中 ) 信息 ， 例 如 : 
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<div id="loading"> 
Loading... 
</div> 


反馈 信息 就 是 一 个 HTML 片段 ， 比 如 可 以 包含 用 作 动 态 指示 需 的 一 幅 动态 GIF 图 像 。 此 时 ， 
可 以 在 CSS 文 件 中 添加 一 些 简单 的 样式 ， 这 样 当 显示 该 信息 时 ， 页 面 的 外 观 如 图 6-11 所 示 。 














The Devil's Dictionary 


by Ambrose Bierce 





A 
B 
C 
Loading... 

D 
区 

Eavesdrop 

Edible 





图 6-11 


但 是 , 依照 渐进 增强 的 原则 ， 我们 并 没有 把 HTML 标 记 直 接 放 在 页 面 中 。 因 为 这 段 信息 只 能 
在 JavaScript 有 效 的 情况 下 使 用 ， 所 以 应 该 通过 jQuery 来 插入 它 : 


$s(document) .ready (function() { 
$s('<div id="loading">Loading...</div>') 
.insertBefore('#dictionary') 
})3 


而 在 CSS 文 件 中 ， 我 们 为 这 个 <div> 添 加 了 一 条 qisplay :none; 样 式 规则 ， 以 便 在 初始 时 隐 
藏 这 条 信息 。 要 在 恰当 的 时 机 显示 这 条 信息 ， 只 需 通 过 .ajaxstart () 将 它 注册 为 一 个 “观察 员 ” 
即 可 : 

$s(document) .ready (function() { 


var S$loading = $('<div id="loading">Loading...</div>') 
.insertBefore('#dictionary'); 
































$s (document) .ajaxStart (function() { 
$loading.show(); 
0s 


而 且 ， 可 以 在 此 基础 上 继续 连 缀 相应 的 隐藏 行为 : 
代码 清单 6-15 


$s(document) .ready (function() { 


var S$loading = $('<div id="loading">Loading...</div>') 
.insertBefore('#dictionary'); 


$s (document) .ajaxStart (function() { 
$loading.show(); 
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}) .ajaxStop (Eunction() { 
$sloading.hide(); 

了 
站 


好 的 ! 我 们 的 加 载 反馈 系统 已 经 就 位 了 。 
同样 ， 我 们 注意 到 ， 这 两 个 方法 没有 通过 特别 的 方式 与 Ajax 通信 的 开始 建立 联系 。 链 接 A 上 
的 .1oaa() 和 链接 B 上 的 .getJsoN() 都 可 以 导致 反馈 操作 发 生 。 
在 这 种 情况 下 , 全 局 行为 是 有 必要 的 。 假如 我 们 想 要 建立 具体 的 联系 , 也 有 一 些 可 控 的 选项 。 
某 些 观察 员 方法 ， 如 .ajaxErzor() ， 会 向 它们 的 回调 函数 发 送 一 个 对 XMLHEtpRequest 对 象 的 
引用 。 这 样 就 可 以 做 到 区 别 不 同 的 请 求 来 提供 不 同 的 行为 。 其 他 更 具体 的 处 理 可 以 通过 使 用 低级 
的 $ .ajax() 函数 来 完成 。 
不 过 ， 与 请 求 最 常见 的 交互 方式 (我 们 已 经 介绍 过 了 )， 是 成 功 (success ) 回调 函数 。 在 前 
面 的 几 个 例子 中 ， 我 们 就 是 使 用 这 个 回调 函数 来 解析 从 服务 器 返回 的 数据 ， 然 后 将 结果 填充 到 页 
面 上 。 当 然 ， 也 可 以 使 用 其 他 回调 函数 。 现 在 ， 仍 然 以 代码 清单 6-1 中 使 用 的 .1oaa () 方 法 为 例 : 
s(dqocument) .ready (function() { 
$('#letter-a a').click(function(event) { 
event .preventDefault (); 
$s('#dictionary') .load('a.html'); 


Fy) 
}) 3 


此 时 ， 通 过 使 加 载 的 内 容 淡 入 视图 而 不 是 突然 出 现 ， 可 以 从 视觉 上 加 入 一 些 增强 的 效 
果 。.1oad() 方 法 可 以 接受 一 个 加 载 完 成 时 触发 的 回调 函数 ， 参 见 代 码 清单 6-16。 


代码 清单 6-16 


$s (document) .ready (function() { 
$('#letter-a a').click(function(event) { 
event .preventDefault(); 
$s('#dictionary') .hide().load('a.html', function() { 
$s(this).fadeIn(); 
}) 
$3 
人 


以 上 代码 首先 隐藏 了 目标 元 素 ， 然 后 开始 加 载 。 当 加 载 完成 时 ， 又 通过 回调 函数 以 淡 人 方式 
逐渐 显示 出 新 生成 的 元 素 。 


6.6 ”错误 处 理 


到 现在 为 止 , 我 们 的 请 求 都 能 够 成 功 地 完成 , 新 内 容 都 能 如 期 显示 在 页 面 中 。 但 负责 任 的 开 
发 也 会 考虑 到 网 络 或 数据 发 生 错误 的 可 能 性 , 并 适当 地 记录 或 报告 这 些 错误 。 在 本 地 环境 中 开发 
Ajax 应 用 有 时 候 会 让 开发 人 员 过 于 乐观 ,因为 除了 拼 错 URL 这 种 简单 的 情况 外 ，Ajax 错 误 不 会 发 
生 在 本 地 。 更 加 严重 的 ，$ .get () 和 . load () 等 快捷 的 Ajax 方法 并 没有 提供 错误 回调 参数 ， 因 此 
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我 们 需要 找 找 其 他 地 方 是 否 有 解决 方案 。 

除了 使 用 全 局 的 .ajaxError () 方 法 ,我 们 还 可 以 利用 jQuery 的 延迟 对 象 系统 。 第 11 章 将 讨 
论 延 迟 对 象 的 具体 细节 , 现在 只 要 知道 可 以 给 .1oad() 之 外 的 Ajax 方法 连 缀 .done() 、.always () 
和 .fail() 方 法 ， 并 通过 它们 添加 相应 的 回调 函数 即 可 。 比 如 ， 可 以 在 代码 清单 6-16 的 基础 上 ， 
把 URL 改 为 一 个 不 存在 的 地 址 ， 然 后 测试 .fail() 方 法 ， 如 代码 清单 6-17 所 示 。 


代码 清单 6-17 


$s (document) .ready (function() { 
$('#letter-e a').click(function(event) { 
event .preventDefault(); 
Var requestData = {term: $ (this) .text()}; 
$s.get('z.php', requestData, function(data) { 
$s('#dictionary') .html (data); 
}) .fail(function(jqxHR) { 
$('#dictionary') 
.html('An error occurred: ' + jqxXHR.status) 
.append (jqxHR .responseText ) ， 
] 
})3 
了 


现在 ， 单 击 字母 E 开 头 的 任何 链接 都 会 产生 一 个 错误 ， 如 图 6-12 所 示 。 根 据 服务 器 的 配置 不 
同 ，jaxHR.responseText 的 内 容 可 能 会 有 所 不 同 。 




















The Devil's Dictionary 
by Ambrose Bierce 
Sorry, but an error occurred: 404 
A 
B Not Found 
c The requested URL /6549/06/z.php was not found on this server. 
D 
E 
Eawaesrirnn 








图 6-12 


此 外 ，.status 属 性 中 包含 着 服务 器 返回 的 状态 码 。 这 些 代码 由 HTTP 规 范 定义 ， 当 触 
发 .fail () 处 理 程序 时 ， 可 以 根据 下 表 解 读 错误 。 
































响 应 码 说 明 
400 请 求 语法 错误 
401 未 授权 
403 禁止 访问 
404 未 发 现 请 求 的 URL 
500 服务 器 内 部 错误 
贸 
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W3C 站 点 ( http:/www.w3.org/Protocols/rfc2616/rfc2616-sec10.html ) 有 完整 的 响应 码 列表 。 
第 13 章 还 会 更 深入 地 介绍 错误 处 理 。 


6.7 Aiax 和 事件 





假设 我 们 想 让 字典 词 条 名 来 控制 后 面 解释 的 可 见 性 , 即 单 击 词 条 名 可 以 显示 或 隐藏 相应 的 解 
释 。 使 用 到 目前 为 止 介绍 的 技术 ， 实 现 这 一 点 应 该 很 简单 ， 参 见 代码 清单 6-18。 


代码 清单 6-18 

// 未 完成 的 代码 

$ (document) .ready (function() { 

$('h3.term') .click(function() { 

$ (this).siblings('.definition').slideToggle(); 

由 
当 词 条 被 单 击 时 ， 该 元 素 找到 类 名 中 包含 aefinition 的 相 邻 节点 ， 并 根据 情况 请 入 或 滑 出 
这 些 节点 。 

虽然 看 起 来 一 切 正常 , 但 在 现 有 代码 基础 上 单 击 不 会 有 什么 结果 。 因 为 在 添加 click 人 处理 程 
序 的 时 候 ， 词 条 还 没有 被 添加 到 文档 中 。 而 且 即 使 已 经 把 click 处 理 程序 添加 到 词 条 元 素 ， 只 要 
一 单 击 其 他 字母 ， 这 些 处 理 程序 仍然 会 丢失 绑 定 。 

这 是 通过 Ajax 生成 页 面 内 容 时 的 一 个 常见 问题 。 对 此 , 一 种 常见 的 解决 方案 就 是 在 页 面 内 容 
更 新 时 重新 绑 定 处 理 程序 。 但 这 样 做 会 相当 繁琐 ， 因 为 哪怕 页 面 的 DOM 结 构 有 一 点 点 变化 ， 都 
会 调用 绑 定 处 理 程序 的 代码 。 

另外 一 种 值得 推荐 的 做 法 是 第 3 章 介 绍 的 事件 委托 。 在 此 ， 事 件 委托 的 本 质 就 是 把 事件 处 
理 程序 绑 定 到 一 个 祖先 元 素 ， 而 这 个 祖先 元 素 始终 不 变 。 对 于 这 个 例子 而 言 ， 我 们 可 以 使 
用 .on () 方 法 把 click 处 理 程序 绑 定 到 <boqy> 元 素 ， 以 这 种 方式 来 捕获 单 击 事件 ， 参 见 代码 
清单 6-19。 










































































代码 清单 6-19 


$ (document) .ready (function() { 
s('body') .on("click’, "hh3.term', function() { 
s(this).siblings('.definition').slideToggle(); 
}) 
})3 


.on () 方 法 告诉 浏览 器 密切 注意 页 面 上 发 生 的 任何 单 击 事件 。 当 〈 且 仅 当 ) 被 单 击 的 元 素 与 
h3 .term 选 择 符 匹 配 时 ， 才 会 执行 事件 处 理 程序 。 这 样 ， 无 论 单 击 哪个 词 条 ,都 可 以 正常 切换 相 
应 的 解释 ， 即 使 对 应 的 解释 内 容 是 通过 Ajax 后 来 添加 到 文档 中 的 也 没有 问题 。 
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6.8 安全 限制 


尽管 构建 动态 的 Web 应 用 程序 非常 实用 ， 但 XMLHttpRequest (jQuery 的 Ajax 实现 背后 的 底 
层 浏 览 器 技术 ) 常常 会 受到 严格 限制 。 为 了 防止 各 种 跨 站 点 脚本 攻击 , 一般 情况 下 从 提供 原始 页 
面 的 服务 器 之 外 的 站 点 请 求 文档 是 不 可 能 的 。 

这 通常 都 是 一 种 积极 的 情形 。 例 如 ， 对 接收 到 的 JSON 数 据 ， 可 以 调用 eval () 来 解析 ( 相对 
而 言 ，jQuery .parseJSON() 更 安全 一 些 )。 如 果 数 据 文 件 中 存在 恶意 代码 ， 那 么 通过 eval () 
解析 就 会 执行 这 些 恶 意 代码 。 不 过 , JavaScript 的 安全 模型 会 限制 数据 文件 必须 与 网 页 保存 在 相同 
的 服务 器 上 ， 这 样 就 可 以 保证 数据 的 可 靠 性 。 

但 是 ,从 第 三 方 来 源 中 加 载 数据 往往 是 很 有 必要 的 。 因 而 , 也 有 许多 方式 可 以 绕 过 上 述 安全 
限制 ， 即 能 够 实现 通过 Ajax 请 求 取 得 其 他 站 点 的 数据 。 

其 中 一 种 方法 是 通过 服务 器 加 载 远 程 数 据 , 然后 在 客户 请 求 时 提供 给 浏览 器 。 这 是 一 种 非常 
有 效 的 手段 ,因为 服务 器 能 够 对 数据 进行 预 处 理 。 例 如 ,可 以 从 几 个 来 源 加 载 包 含 RSS 新 闻 的 XML 
文件 ， 然 后 在 服务 器 上 将 这 些 XML 文 件 聚 合 到 一 个 源 文件 中 ， 当 请 求 发 生 时 再 将 这 个 新 文件 发 
布 给 客户 。 

如 果 想 不 通过 服务 器 的 参与 加 载 远 程 地 址 中 的 数据 , 那 我 们 就 必须 聪明 一 些 。 例 如 ,加载 外 
来 JavaScript 文 件 的 一 种 流行 方法 是 根据 请 求 注 和 人 <script> 标 签 。 由 于 jQuery 能 帮 我 们 插入 新 的 
DOM 元 素 ， 因 此 向 文档 中 注入 <script> 标 签 非常 简单 : 


$s (document .createElement ('script')) 
.attr('src', 'http://example.com/example.js') 
.appendTo('head'); 


实际 上 ，$.getscript () 方 法 在 检测 到 其 URL 参 数 中 包含 远程 主机 时 ， 就 会 自动 采用 这 种 
技术 ; 也 就 是 说 ， 该 方法 已 经 替 我 们 想到 了 这 一 点 。 

此 时 ,浏览 右 会 执行 加 载 的 脚本 , 但 却 没有 任何 机 制 能 够 从 脚本 中 取得 结果 。 为 此 ,使 用 这 
种 技术 要 求 同 远程 主机 进行 协作 。 加 载 的 脚本 必须 执行 某 些 操作 , 例如 设置 一 个 对 本 地 环境 有 影 
响 的 全 局 变量 。 而 远程 主机 上 的 服务 除了 发 布 能 够 通过 这 种 方式 执行 的 脚本 外 ， 还 会 提供 一 个 
API 以 便 同 远程 脚本 进行 交互 "。 

另 一 种 方法 是 使 用 <iframe> 这 个 HTML 标 签 来 加 载 远 程 数据 。 可 以 为 <iframe> 元 素 指定 任 
何 URL 作 为 其 获取 数据 的 来 源 , 包括 与 提供 页 面 的 服务 器 不 匹配 的 URL。 因 此 ,第 三 方 服 务 器 上 
的 数据 能 够 轻易 地 加 载 到 <iframe> 中 , 并 在 当前 页 面 上 显示 出 来 。 然 而 , 要 操作 <iframe> 中 的 
数据 , 仍然 存在 同 使 用 <script> 标 签 时 一 样 的 协作 需求 ; 位 于 <iframe> 中 的 脚本 需要 明确 地 向 
父 文 档 中 的 对 象 提供 数据 。 
























































































































































Q@ 由 于 在 动态 注入 的 <script> 标 签 中 ， 脚 本 可 以 来 源 于 任何 一 个 域 ( src 属性 可 以 指向 任何 第 三 方 站 点 )， 也 就 意 
味 着 可 以 通过 该 脚本 中 的 XxMLHttpRequest 对 象 取得 任何 其 他 域 中 的 信息 ， 因 而 就 绕 过 了 “ 同 源 策略 ”的 安全 限 
制 。Google Map 的 Google Maps API ( http://google.com/apis/maps ) 就 采用 了 这 种 动态 生成 <script> 标 签 的 技术 。 
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最 近 ，W3C 又 制定 了 一 项 技术 草案 ， 叫 做 Cross-Origin Resource Sharing 
> ( CORS， 跨 域 资源 共享 )。 这 项 技术 要 求 一 个 域 向 另 一 个 域 发 送 的 请 求 中 要 和 包含 
另 一 个 域 期 待 的 自 定义 HTTP 头 部 。 接 收 请 求 的 域 如 果 接 受 请 求 ， 必 须 返 回 

Access-Control-Allow-Oreigin 响 应 头 部 。 要 了 解 CORS 的 更 多 信息 ， 请 访 
问 http://www.w3.org/TR/cors/。 


使 用 JSONP 加 载 远程 数据 


使 用 <script> 标 签 从 远程 获取 JavaScript 文 件 的 思路 ， 可 以 变通 为 从 其 他 服务 器 取得 JSON 
文件 。 不 过 ， 这 样 需要 对 服务 器 上 的 JSON 文 件 稍 加 修改 。 在 实现 这 一 技术 的 众多 解决 方案 中 ， 
jQuery 直接 支持 的 是 JSONP (JSON with Padding， 填 充 式 JSON )。 

JSONP 的 格式 是 把 标准 JSON 文 件 包装 在 一 对 圆 括号 中 ， 圆 括号 又 前 置 一 个 任意 字符 串 。 这 
个 字符 串 ， 即 所 谓 的 P( Padding， 填 充 )， 由 请 求 数据 的 客户 端 来 决定 。 而 且 ， 由 于 有 一 对 圆 括 
号 , 因此 返回 的 数据 在 客户 端 可 能 会 导致 一 次 函数 调用 , 或 者 是 为 某 个 变量 赋值 一 一 取决 于 客户 
端 请 求 中 发 送 的 填充 字符 串 。 

用 PHP 在 服务 器 端 实 现 对 JSONP 的 支持 非常 简单 : 


<?php 
print($_GET['callback'] .'('. $data .')'); 
Pe 


这 里 ，$data 是 一 个 包含 JSON 文 件 字 符 串 表示 的 变量 。 调 用 这 段 脚 本 时 ， 从 客户 端 请 求 中 
取得 的 callback 查 询 字 符 串 参数 ， 会 被 添加 到 包含 JSON 数 据 文件 的 圆 括 号 前 面 。 

为 演示 这 一 技术 , 需要 稍微 修改 一 下 代码 清单 6-6 中 的 JSON 示 例 , 以 便 调用 这 个 远程 数据 源 。 
$.getJSON () 图 数 利 用 了 一 个 特殊 的 占 位 符 ? 来 实现 这 一 点 ， 参 见 代 码 清 单 6-20。 
































代码 清单 6-20 
s(dqocument) .ready (function() { 
var url = 'http://examples.learningjquery.com/jsonp/g.php'; 


$('#letter-g a').click(function(event) { 
event .preventDefault(); 
$.getJSON(url + '?callback=?', function(data) { 
Var html = "" 
$s.each(data, function(entryIndex, entry) { 
html += '<div class="entry">'; 
html += '<h3 class="term">' + entry.term + '</h3>'; 
html += '<div class="part">' + entry.part + '</div>'; 
html += '<div class="definition">'; 
html += entry.definition; 
if (entry.quote) { 
html += '<div class="quote">'; 
$s.each(entry.quote, function(lineIndex, line) { 


网 
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html += '<div class="quote-line">' + line + 
NOLY 
3 
if (entry.author) { 
html += '<div class="quote-author">' + 
entry.author + '</div>'; 
} 
html += '</div>'; 
} 
html += '</div>'; 
html += '</div>'; 
小) 过 
$('#dictionary') .html (html) ; 
村 
))3 
了 


正常 情况 下 , 我 们 是 不 能 从 远程 服务 器 ( 这 个 例子 中 的 examples .learningjquery .com ) 
取得 JSON 数 据 的 。 但 是 ， 由 于 远程 文件 经 过 设置 以 JSONP 格 式 提供 数据 ， 因 此 通过 在 URL 后 面 
添加 一 个 查询 字符 串 ， 并 使 用 ?作为 callback 参 数 的 占 位 符 就 可 以 获得 数据 。 请 求 返回 之 后 ， 
jQuery 会 为 我 们 替换 ? 、 解 析 结 果 并 通过 Gata 参 数 将 数据 传 和 成功 函数 。 结 果 就 好 像 是 在 处 理 本 
地 JSON 数 据 一 样 。 

注意 , 前 面 提 到 的 安全 注意 事项 在 这 里 也 适用 , 即 服 务 器 返回 的 任何 结果 都 将 在 用 户 的 计算 
机 中 执行 。 因 此 ， 应 该 只 针对 来 自 可 信任 站 点 的 数据 使 用 JSONP 技 术 。 


6.9 其 他 工具 


jQuery 的 Ajax 工具 箱 中 包含 的 工具 非常 丰富 ， 前 面 我 们 介绍 的 只 是 其 中 一 小 部 分 。 鉴 于 有 用 
的 工具 确实 很 多 ， 下 面 我 们 就 概述 一 些 定制 Ajax 通信 过 程 中 较为 重要 的 工具 。 
























































6.9.1 低级 Ajax 方法 


前 面 已 经 介绍 了 一 些 用 于 启动 Ajax 通信 的 方法 。 但 在 内 部 ,jQuery 会 把 这 些 方法 都 对 象 为 
s.ajax() 全 局 函数 的 一 种 变 体 。 这 个 函数 不 针对 任何 特定 的 Ajax 通信 类 型 ， 而 是 接收 一 个 选项 
对 象 参 数 ， 并 根据 该 参数 来 决定 相应 的 行为 。 

我 们 介绍 的 第 一 个 例子 ， 是 使 用 s ('#dictionary') .1load('a.html') 加 载 HTML 片 段 。 
同样 的 操作 如 果 使 用 $ .ajax() 来 实现 ， 应 该 如 代码 清单 6-21 所 示 。 


代码 清单 6-21 


$.ajax({ 
rl Ta htmlL”, 
success: function(data) { 
$s('#dictionary') .html (data); 
} 
} 
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这 里 ，$ .ajax() 接 受 了 一 个 包含 30 余 项 设置 ( settings ) 的 对 象 作 为 参数 ( 或 者 一 个 URL 
字符 串 作为 第 一 个 参数 ,一 个 对 象 作 为 第 二 个 参数 ), 提供 了 极 大 的 灵活 性 。 使 用 低级 的 $.ajax() 
函数 时 ， 可 以 获得 下 列 特殊 的 好 处 。 

口 避免 浏览 器 缓存 来 自 服务 器 的 响应 。 非 常 适合 服务 器 动态 生成 数据 的 情况 。 

口 抑制 正常 情况 下 所 有 Ajax 交互 都 可 以 触发 的 全 局 处 理 程序 ( 例如 通过 $ .ajaxstart () 注 
册 的 处 理 程序 )。 

口 在 远程 主机 需要 认证 的 情况 下 ， 可 以 提供 用 户 名 和 密码 。 

要 了 解 如 何 利 用 上 述 及 其 他 特性 ， 请 参考 在 线 API ( http://api.jquery.com/jQuery.Ajax )。 

















6.9.2 ”修改 默认 选项 





使 用 $.ajaxsetup() 函数 可 以 修改 调用 Ajax 方 法 时 每 个 选项 的 默认 值 。 这 个 函数 与 
$ .ajax() 接 受 相同 的 选项 对 象 参 数 ， 之 后 的 所 有 Ajax 请 求 都 将 使 用 传递 给 该 函数 的 选项 一 一 除 
非 明确 覆盖 ， 参 见 代码 清单 6-22。 


代码 清单 6-22 


$.ajaxSetup({ 
urls “wheml”, 
type: 'POST", 
dataType: 'html' 
}); 


$.ajax({ 
type: 'GET', 
success: function(data) { 
$('#dictionary') .html (data); 
} 
了 
这 里 的 操作 与 前 面 使 用 $ .ajax () 时 实现 的 操作 相同 , 不 过 由 于 已 经 通过 $ .ajaxSetup () 
为 请 求 指定 了 默认 的 URL， 因 此 调用 $ .ajax() 时 就 不 需要 再 指定 该 选项 了 。 相 对 而 言 ， 虽 然 
已 经 把 type 人 参数 的 默认 值 指定 为 posT, 但 在 $.ajax() 调 用 中 仍然 可 以 覆盖 这 个 值 , 将 其 修改 
为 GET。 





























6.9.3 ”部 分 加 载 HTML 页面 





本 章 讨 论 的 第 一 种 ， 也 是 最 简单 的 一 种 Ajax 技术 ， 就 是 取得 并 将 HIML 片 段 插 入 到 当前 页 面 
中 。 不 过 ， 有 时 候 服务 器 提供 的 页 面 中 虽然 包含 我 们 需要 的 部 分 ， 但 该 部 分 之 外 的 HTML 却 不 是 
我 们 所 需要 的 。 当 遇 到 这 种 服务 器 不 能 提供 适当 的 数据 格式 的 情况 时 ， 也 可 以 在 客户 端 求 助 
于 jQuery。 

如 果 在 本 章 第 一 个 例子 中 ， 我 们 需要 的 字典 解释 包含 在 如 下 所 示 的 完整 的 HIML 页面 
(hhtml ) 中 : 
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<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>The Devil's Dictionary: H</title> 


<link rel="stylesheet" href="dictionary.css" 
media="screen" /> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<h2>The Devil's Dictionary: H</h2> 
<div class="author">by Ambrose Bierce</div> 
</div> 


<div id="dictionary"> 
<div class="entry"> 
<h3 class="term">HABEAS CORPUS</h3> 
<div class="part">n.</div> 
<div class="definition"> 
A writ by which a man may be taken out of jail 
when confined for the wrong crime. 
</div> 
</div> 





<div class="entry"> 
<h3 class="term">HABIT</h3> 
<div class="part">n.</div> 
<div class="definition"> 

A shackle for the free. 

</div> 

</div> 

</div> 


</div> 
</body> 
</html> 


那么 ， 可 以 通过 代码 清单 6-1 中 的 技术 把 整个 文档 都 加 载 到 页 面 中 ， 如 代码 清单 6-23 所 示 。 


代码 清单 6-23 
// 未 完成 的 代码 


$s(document) .ready (function() { 
$('#letter-h a').click(function(event) { 
event .preventDefault(); 
$s('#dictionary') .load('h.html'); 


不 过 产生 的 结果 并 不 理想 , 因为 文档 中 包含 不 需要 的 内 容 ( 加载 的 内 容 中 包含 页 面 标题 和 作 
者 名 ， 这 显然 与 已 有 内 容重 复 了 )， 如 图 6-13 所 示 。 
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The Devil's Dictionary 
by Ambrose Bierce 


I> 


The Devil's Dictionary: H 








B by Ambrose Bierce 
C 
5 HABEAS CORPUS 1. 
E A writ by which a man may be 
和 es taken out of jail when confined for 





图 6-13 


要 去 掉 页 面 中 多 余 的 内 容 ， 可 以 利用 .load() 的 一 些 新 特性 一 一 在 指定 要 加 载 文档 的 URL 
时 ,也 可 以 提供 一 个 jQuery 选择 符 表达 式 。 如 果 指 定 了 这 个 表达 式 ，.1oad() 方 法 就 会 利用 它 查 
找 加 载 文 档 的 匹配 部 分 。 最终 ， 只 有 匹配 的 部 分 才 会 被 插入 到 页 面 中 。 具 体 来 说 , 我们 可 以 利用 
这 个 技术 ， 只 取得 文档 中 的 词 条 部 分 ， 然 后 搬入 到 页 面 中 ， 如 代码 清单 6-24 所 示 。 6 


代码 清单 6-24 


$s (document) .ready (function() { 
$('#letter-h a').click(function(event) { 
event .preventDefault(); 
$s('#dictionary') .load('h.html .entry'); 
}); 
} 3 


这 样 ， 文 档 中 无 关 的 部 分 已 经 从 页 面 中 去 掉 了 ， 如 图 6-14 所 示 。 











The Devil's Dictionary 
by Ambrose Bierce 


A HABEAS CORPUS n. 
A writ by which a man may be taken out of jail when confined for 
B the wrong crime. 
Cc 
HABIT n. 
一 A shackle for the free. 
E 


Eavesdrop HALF n. 


Edible One of two equal parts into which a thing may be divided, or 
Education considered as divided. In the fourteenth century a heated 
Bloquence discussion arose among theologists and philosophers as to 











图 。6-14 
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本 章 中 ,我 们 学 习 了 使 用 jQuery 提供 的 Ajax 方法 ， 在 不 刷新 页 面 的 情况 下 ， 从 服务 器 上 加 载 
几 种 不 同 格式 的 数据 。 而 且 , 我 们 也 可 以 基于 请 求 执行 来 自 服务 器 的 脚本 ,并 且 能 够 向 服务 器 发 
送 数据 。 

同时 ,我 们 还 学 习 了 如 何 处 理 常见 的 异步 加 载 技术 的 问题 , 例如 在 加 载 发 生 后 绑 定 处 理 程序 ， 
以 及 从 第 三 方 服务 顺 中 加 载 数据 。 

这 一 章 是 本 书 教程 部 分 的 最 后 一 音 。 到 目前 为 止 ， 我 们 已 经 学 习 了 jQuery 提供 的 主要 工具 。 
下 一 章 ， 我 们 就 介绍 使 用 jQuery 插件 来 扩展 现 有 的 功能 。 














延伸 阅读 


第 13 章 更 深入 地 讨论 了 有 关 Ajax 的 主题 。 要 了 解 有 关 Ajax 方 法 的 完整 介绍 ， 请 参考 本 书 附 录 
C 或 jQuery 官方 文档 : http://api.jquery.com/。 


6.11 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
“挑战 ”练习 有 一 些 难度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : 
http://api.jquery.com/。 
(1) 页 面 加 载 后 ， 把 exercises-content.html 的 主体 ( body ) 内 容 提 取 到 页 面 的 内 容 区 域 。 
(2) 不 要 一 次 就 显示 整个 文档 ,请 为 左 侧 的 字母 列表 创建 “提示 条 ”， 当 用 户 鼠 标 放 到 字母 上 
时 ， 从 exercises-content.html 中 加 载 与 该 字母 有 关 的 内 容 。 
(3) 为 页 面 加 载 添加 错误 处 理 功能 , 在 页 面 的 内 容 区 显示 错误 消息 。 修改 脚本 ,请求 does-not- 
exist.html 而 不 是 exercises-content.html， 以 测试 错误 处 理 功 能 。 
(4) 挑战 : 页面 加 载 后 ， 向 GitHub 发 送 一 个 JSONP 请 求 ， 取 得 某 个 用 户 代 码 库 的 列表 。 把 每 
个 代码 库 的 名 称 和 URL 插 入 到 页 面 的 内 容 区 。 取 得 jQuery 项 目 代 码 库 的 URL 是 https://api. 
github.com/users/Jquery/reposo 
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本 书 前 6 章 讨论 了 jQuery 的 核心 组 件 ， 介 绍 了 使 用 jQuery 库 完成 各 种 任务 的 许多 方式 。 但 是 ， 
唯 独 还 没有 深入 讨论 的 一 个 方面 就 是 同 它 的 核心 一 样 强大 的 扩展 能 力 。 通 过 使 用 jQuery 简洁 的 插 
件 架 构 ， 开 发 者 能 够 把 jQuery 的 功能 扩展 得 更 加 丰富 。 
jQuery 社区 不 断 发 展 ， 其 创造 的 插件 已 经 达到 了 数 百 个 
户 界面 部 件 。 本 章 就 来 介绍 怎么 挖掘 这 个 巨大 的 宝藏 。 
本 章 ， 我 们 将 介绍 如 下 内 容 : 
口 下 载 和 配置 插件 ; 
口 调用 插件 提供 的 jQuery 方法 ; 
口 使 用 插件 定义 的 选择 符 查 找 元 素 ; 
口 使 用 jQuery UI 添 加 专业 的 用 户 界面 行为 ; 
口 使 用 jQuery Mobile 实 现 适 合 移动 设备 的 功能 。 


7.1 查找 插件 和 帮助 


jQuery 官方 网 站 的 插件 库 ( 地 址 为 http://plugins.jquery.com/ ) 时 括 了 大 量 插件 。 这 个 插件 注册 
表 ( The jQuery Plugin Registry ) 中 列 出 了 每 个 插件 的 演示 、 示 例 代 码 及 教程 的 链接 。 由 于 所 有 插 
件 都 托管 在 GitHub ( http://github.com/ ) 代码 库 ， 因 此 通过 查看 一 个 插件 的 星 级 、 有 多 少 “分 支 ” 
代码 ,可 以 大 致 了 解 该 插件 的 品质 ， 至 少 是 它 的 流行 程度 。 这 些 信息 都 会 在 插件 页 面 的 侧 边 栏 中 
给 出 ， 查 阅 方便 。 

假如 在 上 述 官 方 网 站 、GitHub、 作 者 网 站 及 插件 说 明 中 , 仍然 找 不 到 相关 问题 的 答案 ,还 可 
以 访问 jQuery 社区 ， 以 寻求 帮助 。jQuery 论 坛 中 专门 有 一 个 区 域 ， 讨 论 插件 的 使 用 ， 地 址 为 : 
http://forum.jquery.com/using-jquery-plugins/。 很 多 插件 作者 都 是 这 个 讨论 组 的 积极 参与 者 ， 他 们 
会 积极 解答 新 用 户 面临 的 难题 。 


7.2 ”使 用 插件 


使 用 jQuery 插件 很 简单 。 只 要 找到 插件 的 URL, 在 HTML 中 引用 它 , 然后 在 脚本 中 使 用 即 可 。 
为 了 演示 这 个 过 程 ， 我 们 需要 找 一 个 插件 作为 例子 。 








小 到 选择 器 助手 ， 大 到 全 套 的 用 
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jQuery 的 Cycle 插件 就 是 一 个 不 错 的 例子 。 这 个 插件 是 由 Mike Alsup 开 发 的 , 通过 它 可 以 把 静 
态 的 页 面 元 素 变 成 交互 式 的 幻灯 片 。 与 其 他 广 受 欢迎 的 插件 类 似 , 这 个 插件 能 够 满足 各 种 复杂 的 
需求 ， 但 使 用 起 来 却 很 简单 。 


7.2.1 下 载 并 包含 Cycle 插件 


可 以 在 jQuery 插件 注册 表 或 它 的 主页 http:/www.malsup.comyjquery/cycle/ 中 找到 Cycle 插件 。 
在 下 载 页 面 中 可 以 下 载 到 这 个 插件 的 完整 版 和 简化 版 。 我 们 在 这 里 下 载 使 用 完整 版 ， 文 件 名 是 
Jquery.cycle.all.js。 
把 文件 下 载 到 站 点 目录 之 后 ， 需 要 在 文档 的 <nead> 中 引入 这 个 插件 。 此 时 ， 注 意 把 引入 它 
的 代码 放 在 引入 jQuery 主 文件 的 代码 后 面 ， 但 要 位 于 使 用 这 个 插件 的 脚本 前 面 。 
<head> 
<meta charset="utf-8"> 
<title>jQuery Book Browser</title> 
<link rel="stylesheet" href="07.css" type="text/css" /> 
<SCript Sre="JjJdquery, JSs"></Seript> 
<script src="jquery.cycle.all.js"></script> 


<script src="07.js"></script> 
</head> 


这 样 就 安装 了 第 一 个 插件 。 安 装 插件 与 安装 jQuery 一 样 简单 。 然 后 ， 就 可 以 在 脚本 中 使 用 
个 插件 了 。 
7.2.2 ”调用 插件 提供 的 方法 

Cycle 插 件 可 以 作用 于 页 面 中 的 任何 一 组 同辈 元 素 。 为 展示 这 一 点 ， 我 们 需要 一 个 简单 的 
HTMIL 文 档 ,， 文档 中 是 一 个 包含 图 书 封面 和 相关 信息 的 列表 ， 可 以 添加 到 HTML 文 档 的 主体 中 : 

<ul id="books"> 


a 
<img src="images/jq-game.jpg" alt="jQuery Game Development 


























[8 

















Essentials" /> 
<div class="title">jQuery Game Development Essentials</div> 





<div class="author">Salim Arsever</div> 
</1i> 
< 
<img src="images/jqmobile-cookbook.jpg" alt="jQuery Mobile 
Cookbook" /> 
<div class="title">jQuery Mobile Cookbook</div> 
<div class="author">Chetan K Jain</div> 
SS 


</ul> 


在 CSS 文 件 中 写 一 些 样 式 ， 就 可 以 让 这 些 图 书 封面 并 列 地 显示 出 来 ， 如 图 7-1 所 示 。 
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Selected jQuery Books 








jQuery Game 
Development 
Essentials 


Salim Arsever 


jQuery Mobile 
Cookbook 





Chetan K Jain 
图 7-1 


通过 Cycle 捅 件 可 以 将 这 个 列表 转换 成 可 以 交互 的 幻灯 片 。 在 DOM 中 适当 的 容器 上 调 
用 .cycle() 方 法 ， 就 可 以 实现 这 一 转换 ， 参 见 代 码 清 单 7-1。 


代码 清单 7-1 
s(dqocument) .ready (function() { 
$('#books') .cycle(); 

> 

这 个 语法 简单 得 不 能 再 简单 了 。 和 之 前 使 用 其 他 内 置 的 jQuery 方法 一 样 ， 我 们 也 在 一 个 包含 
DOM 元 素 的 jQuery 对 象 上 调用 了 .cycle ()。 即 使 没有 提供 任何 参数 ，.cycle() 也 可 以 帮 我 们 
完成 转换 工作 。 其 中 包括 修改 页 面 的 样式 ， 以 便 每 次 只 显示 一 个 列表 项 ， 然 后 每 4 秒 就 以 交叉 淡 
人 淡出 的 方式 切换 到 下 一 个 列表 项 ， 如 图 7-2 所 示 。 





Selected jQuery Books 


jQuery Mobile 
Cookbook 


Chetan K Jain 
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如 此 简单 易 用 是 典型 的 jQuery 插件 的 特征 。 就 这 么 一 个 简 简单 单 的 方法 调用 ,就 可 以 实现 专业 
实用 的 效果 。 不 过 ,与 其 他 插件 一 样 ，Cycle 也 提供 了 很 多 自 定义 的 选项 ， 可 以 通过 配置 改变 效果 。 


7.2.3 为 插件 方法 指定 参数 


为 插件 方法 传递 参数 与 向 jQuery 方法 中 传递 参数 没有 什么 不 一 样 。 多 数 情 况 下 ， 传 递 的 参数 
是 放 在 一 个 对 象 中 的 , 对 象 由 参数 的 键 值 对 构成 ( 正如 第 6 章 为 $. ajax () 传递 的 参数 那样 ), Cylce 
可 以 接受 的 参数 非常 之 多 ,， 仅 . cycle () 方 法 本 身 就 可 以 接受 50 个 配置 选项 。 这 个 插件 的 文档 详 
细 说 明了 每 个 选项 的 作用 ， 有 的 还 有 详细 的 示例 。 

我 们 可 以 修改 Cycle 插 件 的 两 个 幻灯 片 之 间 的 播放 速度 和 动画 样式 ,修改 幻 灯 片 变换 的 触发 
方式 , 还 可 以 使 用 回调 函数 针对 动画 完成 作出 响应 。 为 了 演示 某 些 功能 ,我 们 为 这 个 方法 提供 
三 个 简单 的 选项 ， 参 见 代码 清单 7-2。 


代码 清单 7-2 


$s(document) .ready (function() { 
$('#books') .cyclel({ 
timeout: 2000, 
speed: 200, 
pause: true 
) 
os 


第 一 个 timeout 选 项 用 于 指定 切换 幻灯 片 之 间 等 待 的 毫秒 数 ( 2000 )， 而 speed 决 定 切换 本 
身 要 花 的 毫秒 数 ( 200 )。 在 把 pause 设 置 为 Lrue 的 情况 下 , 幻灯 片 会 在 鼠标 进入 时 暂停 播放 ， 这 
在 幻灯 片 中 包含 可 以 单 击 的 链接 时 非常 有 用 。 


7.2.4 修改 参数 默认 值 


即使 不 给 Cycle 传递 任何 参数 ， 也 可 以 得 到 非常 棒 的 效果 。 为 此 ， 这 个 插件 为 未 提供 的 选项 
维护 了 一 组 默认 值 。 

Cycle 其 实 也 遵循 了 一 个 常见 的 模式 ， 那 就 是 把 所 有 默认 值 放 在 一 个 对 象 中 。 具 体 到 Cycle 来 
说 , 包含 所 有 默认 选项 的 对 象 是 $ . fn .cycle.defaults。 如 果 有 插件 像 这 样 把 默认 值 保存 在 一 个 
公共 可 见 的 地 方 , 那么 我 们 就 可 以 在 自己 的 脚本 中 修改 它 的 默认 值 , 以 便 在 多 次 调用 插件 时 把 代码 
写 得 更 简单 ， 因 为 不 用 每 次 都 通过 选项 来 指定 新 值 了 。 修改 默认 值 非常 简单 ， 如 代码 清单 7-3 所 示 。 


代码 清单 7-3 


$.fn.cycle.defaults.timeout = 10000; 
$.fn.cycle.defaults.random = true; 











































































































$s(document) .ready (function() { 
$('#books') .cycle({ 
timeout: 2000, 
speed: 200， 
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pause: true 
]) 
四 


这 里 ， 我 们 在 调用 .cycle() 之 前 为 两 个 选项 timeout 和 random 设 置 了 默认 值 。 在 调 
用 .cycle() 并 传递 timeout :2000 的 情况 下 , 默认 值 10000 会 被 忽略 ; 而 random 的 新 值 true 则 
会 发 挥 作用 ， 使 幻灯 片 以 随机 的 方式 进行 变换 。 


7.3 其 他 形式 的 插件 


插件 并 不 局 限于 提供 更 多 的 jQuery 方法 ， 也 可 以 扩展 jQuery 的 功能 ， 甚 至 修改 已 有 的 特性 。 

搬 件 也 可 以 改变 jQuery 库 其 他 部 分 的 运作 方式 。 例如, 有些 搬 件 为 动画 提供 缓 动 风格 ( easing 
style )， 有 的 插件 能 够 响应 用 户 动作 触发 更 多 的 jQuery 事件 。Cycle 搬 件 通 过 添加 新 的 自 定 义 选 择 
符 提 供 了 一 个 类 似 的 增强 特性 。 








7.3.1 自 定 义 选 择 符 


支持 自 定义 选择 符 表达 式 的 插件 扩展 了 jQuery 内 置 选 择 符 引擎 的 功能 ， 可 以 让 我 们 以 全 新 的 
方式 查找 元 素 。Cycle 就 支持 一 种 自 定 义 选 择 符 ， 下 面 我 们 就 来 体验 一 下 这 个 功能 。 
Cycle 的 幻灯 片 通过 调用 .cycle('pause') 和 .cycle('resume') 可 以 暂停 和 恢复 播放 。 而 
通过 以 下 代码 ， 可 以 轻松 地 添加 几 个 按钮 来 控制 幻灯 片 ， 参 见 代 码 清单 7-4。 
代码 清单 7-4 
s(dqocument) .ready (function() { 
Var $books = $('#books'); 
Var $controls = $('<div id="books-controls"></div>'); 
scontrols.insertAfter ($books); 
$s('<button>Pause</button>') .click(function(event) { 
event .preventDefault(); 
Sbooks.cycle('pause'); 
}) .appendTo ($controls); 
$s('<button>Resume</button>') .click(function(event) { 
event .preventDefault(); 
Sbooks.cycle('resume'); 
}) .appendTo ($controls); 
四。 


假设 页 面 中 有 多 组 约 灯 片 ， 我 们 想 通 过 Resume 按 钮 恢复 页 面 中 所 有 暂停 的 幻灯 片 。 那 就 需 
要 找到 页 面 中 所 有 被 暂停 的 幻灯 片 所 在 的 <ul> 元 素 ,然后 全 部 恢复 ,利用 Cycle 自 定义 的 :paused 
选择 符 ， 可 以 轻松 地 实现 这 个 功能 ,参见 代码 清单 7-5。 
代码 清单 7-5 
$s (document) .ready (function() { 
) 


$('<button>Resume</button>' 
event .preventDefault(); 








.Click(function(event) { 
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$('ulLl:paused') .cycle('resume'); 
}) .appendTo ($controls); 
} 


Cycle 在 加 载 之 后 , $('ul:paused' ) 就 会 创建 一 个 jQuery 对 象 , 引用 页 面 中 所 有 暂停 的 幻灯 
片 ， 然 后 我 们 就 可 以 按照 意愿 去 操作 它们 。 类 似 这 样 的 由 搬 件 提供 的 选择 符 扩 展 ， 能 够 与 jQuery 
标准 的 选择 符 随 意 地 结合 使 用 。 不 难 想 象 ， 通 过 选择 适当 的 插件 ， 可 以 把 jQuery 塑造 得 更 符合 我 
们 的 要 求 。 


7.3.2 ”全 局 函数 插件 


很 多 流行 的 插件 在 jQuery 命名 空间 中 提供 了 一 些 新 的 全 局 函数 。 在 插件 提供 的 功能 与 页 面 
中 的 DOM 元 素 无 关 ， 因 而 不 适合 扩展 标准 jQuery 方法 的 情况 下 ， 这 种 模式 是 很 常见 的 。 例 如 ， 
Cookie 插 件 ( https://github.com/carhartl/jquery-cookie ) 提供 了 读 写 页 面 中 cookie 值 的 接口 。 而 这 个 
功能 是 通过 $ .cookie () 函数 提供 的 ， 这 个 函数 可 以 取得 或 设置 个 别 的 cookie 值 。 

例如 ， 假 设 我 们 想 在 用 户 单 击 约 灯 片 的 Pause 按 钮 时 保持 暂停 状态 ， 当 用 户 离开 当前 页 面 再 
返回 时 仍然 保持 暂停 。 那 么 , 在 加 载 Cookie 搬 件 后 ,只 要 将 cookie 名 作为 参数 就 可 以 读 取 到 cookie 
的 值 了 ， 如 代码 清单 7-6 所 示 。 


代码 清单 7-6 


if ( S$.cookie('cyclePaused') ) { 
Sbooks.cycle('pause'); 


} 


这 里 , 我 们 检查 名 为 cyclePaused 的 cookie 是 否 存在 。 此 时 这 个 cookie 的 值 是 什么 并 不 重要 。 
如 果 存 在 这 个 cookie， 则 暂停 播放 幻灯 片 。 把 这 个 暂停 条 件 判 断 语句 插 到 对 .cycle () 的 调用 后 
面 ， 就 可 以 使 幻灯 片 暂停 在 第 一 幅 图 像 的 状态 ， 直 到 用 户 在 某 一 时 刻 单 击 Resume 按 钮 。 

当然 ， 由 于 我 们 还 没有 设置 cookie 的 值 ， 因 此 幻灯 片 会 照常 播放 所 有 图 像 。 设 置 cookie 就 和 
取得 cookie 的 值 一 样 简单 ， 只 要 传递 一 个 字符 串 作 为 第 二 个 参数 即 可 ， 参 见 代码 清单 7-7。 


代码 清单 7-7 


Var Scontrols = $('<div id="books-controls"></div>') 
.insertAfter (Sbooks) ; 

$('<button>Pause</putton>') .click(function(event) { 
event .preventDefault(); 
$sbooks.cycle('pause'); 
$.cookie('cyclePaused', 'y'); 

}) .appendTo ($controls); 

$s('<button>Resume</button>') .click(function(event) { 
event .preventDefault(); 
$s('ul:paused') .cycle('resume'); 
$.cookie('cyclePaused', null); 

}) .appendTo ($controls); 


在 单 击 Pause 按 钮 时 , 将 cookie 的 值 设置 为 y, 而 在 单 击 Resume 按 钮 时 , 通过 传递 nu11 将 这 个 































































































图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


7.4 jQuery UI 插件 库 145 








cookie 删 除 。 上 默认 情况 下 ，cookie 的 值 将 在 会 话 期 间 保持 ， 直 到 关闭 浏览 器 标签 页 为 止 。 此 外 ， 
默认 情况 下 ，cookie 还 是 与 设置 它 的 页 面 关 联 的 。 如 果 想 改变 这 个 默认 设置 ， 可 以 为 这 个 函数 提 
供 一 个 选项 对 象 作 为 第 三 个 参数 。 这 是 jQuery 插件 力 至 jQuery 核心 函数 的 典型 使 用 模式 。 

比如 , 要 想 让 cookie 在 整个 站 点 中 都 可 以 访问 到 , 而 且 让 它 在 7 天 之 后 再 过 期 , 就 可 以 像 这 样 
来 调用 哺 数 : $s.cookie('cyclePaused'，'y'，{path: '/'，expires: 7})。 要 了 解 这 
方面 的 更 多 信息 ， 以 及 调用 $ .cookie() 时 可 以 使 用 的 选项 ， 请 参考 这 个 插件 的 文档 。 


7.4 ”jQuery UI 插件 库 


与 Cycle、Cookie 等 大 多 数 插件 只 做 一 件 事 相 比 ，jQuery UI 能 够 做 的 事 则 可 谓 包 罗 万 象 (而 
且 ， 做 得 也 都 很 好 )。 实 际 上 ， 虽 然 jQuery UI 经 常 只 保存 在 一 个 文件 中 ， 但 它 可 不 仅仅 是 一 个 搬 
件 ， 而 是 一 个 完整 的 插件 库 。 

jQuery UI 团队 创建 了 大 量 核心 交互 组 件 及 成 熟 的 部 件 ( widget )， 使 用 它们 可 以 创造 出 更 加 
类 似 桌 面 应 用 程序 的 Web 体 验 。 交 互 式 组 件 包括 用 于 拖 动 、 放 置 、 排 序 和 调整 项 目 大 小 的 方法 。 
当前 稳定 的 部 件 有 按钮 、 折 受 窗 格 、 日 期 选择 器 、 对 话 框 ， 等 等 。 此 外 ， jQuery UI 还 为 补充 和 增 
强 jQuery 的 核心 动画 功能 提供 了 相当 多 的 高 级 效果 。 

本 章 不 可 能 面面俱到 地 介绍 jQuer UI 库 一 一 那 可 是 得 用 一 本 书 介绍 的 主题 。 好 在 这 个 库 非 常 
注重 功能 的 一 致 性， 因此 深入 介绍 其 中 几 个 特性 ， 就 能 起 到 以 小 见 大 的 作用 。 

访问 http://jqueryui.com/， 可 以 下 载 所 有 jQuery UI 模块 , 或 者 查看 相应 的 文档 及 示例 。 其 中 下 
载 页 面 中 提供 了 涵盖 所 有 特性 的 组 合 下 载 ， 也 提供 了 可 以 自由 组 合 的 自 定义 下 载 。 下 载 的 ZIP 文 
件 中 还 包含 一 个 样式 表 和 一 些 图 片 ， 用 于 jQuery UI 的 交互 组 件 及 部 件 。 


7.4.1 效果 


jQuery UI 中 的 效果 ( effect ) 模块 由 一 个 核心 文件 和 一 组 独立 的 效果 文件 组 成 。 其 中 ， 核 心 
文件 为 创建 颜色 动画 和 基于 类 的 动画 提供 了 支持 ， 同 时 也 提供 了 高 级 的 缓 动 函 数 。 

1. 颜色 动画 

在 文档 中 引用 核心 效果 文件 的 情况 下 ， 扩 展 的 .animate () 方 法 可 以 接受 另外 一 些 样 式 属 
性 ， 例 如 boraqerTopcolor 、backgroundcolor 和 color。 代 码 清单 7-8 实 现 的 效果 就 是 将 黑色 
背景 上 的 白色 文本 逐渐 变 为 浅 灰 色 背 景 上 的 黑色 文本 。 


代码 清单 7-8 


Sbooks.hover (function() { 
Sbooks.find('.title') .animatel({ 
backgroundColor: '#eee', 
color: '#000' 
F1000) 
}, functiom() 蔷 
Sbooks.find('.title') .animatel({ 
backgroundColor: '#000', 
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Color: '#fff' 
}, 1000); 
3 


现在 ， 把 鼠标 移动 到 页 面 中 的 幻灯 片区 域 ， 图 书 书 名 的 文本 和 背景 颜色 就 会 在 1 秒 〈1000 毫 
秒 ) 的 周期 内 平滑 地 完成 动画 ， 如 图 7-3 所 示 。 


Selected jQuery Books 








册 jQuery UI Cookbook 











Pause | | Resume | 








2. 基于 类 的 动画 

前 几 章 介绍 过 三 个 操作 CSS 类 的 方法 : .addclass () 、.removeClass () 和 .toggleClass ()。 
这 三 个 方法 在 jQuery UI 中 经 过 扩展 , 都 可 以 接受 第 二 个 可 选 的 参数 , 用 于 控制 动画 时 长 。 在 指定 
这 个 参数 的 情况 下 ， 页 面 的 行为 就 像 是 调用 了 .animate () 并 直接 指定 了 所 有 样式 属性 一 样 ， 最 
终结 果 就 是 得 到 为 元 素 应 用 类 之 后 的 外 观 ， 参 见 代码 清单 7-9。 


代码 清单 7-9 


s(dqocument) .ready (function() { 
SC hi)eClick(funetion() { 
$s(this) .toggleClass('highlighted', 'slow'); 
3 
3) 池 


执行 了 代码 清单 7-9 中 的 代码 之 后 ， 再 单 击 页 面 的 标题 就 会 给 它 添加 或 删除 hightlighted 
类 。 因 为 这 里 指定 的 速度 是 slow， 所 以 最 终 的 颜色 、 边 框 和 外 边 距 都 会 以 动画 形式 慢 慢 地 呈现 ， 
而 不 是 一 下 子 就 应 用 这 些 样式 ， 如 图 7-4 所 示 。 


图 7-4 











jQuery 在 某 个 时 长 内 不 会 以 稳定 的 速度 来 执行 动画 。 例 如 ， 如 果 我 们 调用 $ ('#my-aiv') . 
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slideUp (1000), 那么 相应 元 素 的 高 度 变 为 零 要 经 过 整整 1 秒 的 时 间 。 但 在 这 1 秒 的 开始 和 结 
元 素 的 高 度 变化 比较 慢 ， 而 在 这 1 秒 的 中 间 ， 高 度 变 化 比较 快 。 这 种 速度 的 变化 就 是 缓 动 ， 缓 动 
有 助 于 让 动画 更 流畅 、 更 自然 。 

高 级 缓 动 函 数 可 以 改变 加 速 或 减速 曲线 ， 以 产生 与 众 不 同 的 结果 。 例 如 ，easeInExpo 子 数 
会 让 动画 速度 以 指数 方式 加 快 ， 最 终 的 动画 速度 要 数 倍 于 开始 时 的 速度 。 在 任何 核心 jQuery 动画 
方法 或 jQuery UI 效果 方法 中 ,都 可 以 指定 自 定义 的 缓 动 函 数 。 具 体 指 定 方 式 根据 使 用 的 语法 不 同 ， 
可 能 是 添加 一 个 参数 ， 也 可 能 是 为 选项 对 象 中 添加 一 个 选项 。 

为 了 演示 绥 动 函数 的 作用 ， 下 面 我 们 就 在 代码 清单 7-9 的 基础 上 ,为 .toggleclass() 方 法 
传人 一 个 easeInExpo 参 数 作 为 缓 动 样式 ， 参 见 代 码 清 单 7-10。 


代码 清单 7-10 


$s (document) .ready (function() { 

$s('h1li').click(function() { 
s(this) .toggleClass('highlighted', 'slow', 'easeInExpo'); 
}); 
省 ) 


这 样 ， 再 单 击 页 面 中 的 标题 ， 通 过 切换 类 而 修改 的 样式 会 在 开始 的 时 候 慢 慢 地 应 用 ， 然 后 突 
然 加 速 完成 整个 变换 。 


< 治 、 观看 缓 动 函 数 的 示例 
Q 要 查看 完整 的 缓 动 函数 的 演示 效果 ， 请 访问 http:/apijqueryui.comy/easings/。 


4. 其 他 效果 

效果 模块 的 独立 效果 文件 中 包含 了 非常 多 的 变换 , 其 中 一 些 变换 远 比 jQuery 本 身 提 供 的 简单 滑 
动 和 淡化 动画 复杂 得 多 。 这 些 变换 都 可 以 通过 调用 .effect () 方 法 实现 ， 这 个 方法 是 jQuery UI 添 
加 的 。 对 于 那些 隐藏 和 显示 元 素 的 动画 ， 可 以 视 情 况 调用 .show() 、.hide() 和 .toggle() 方 法 。 

jQuery UI 提 供 的 效果 可 以 满足 各 种 不 同 的 需求 。 比 如 ，transfer 和 size 可 以 用 来 改变 元 素 
的 形状 和 位 置 , explode 和 puff 可 以 产生 更 吸引 人 的 隐藏 动画 , 而 pulsate 和 shake 则 可 以 让 元 
素 更 吸引 眼球 。 


”观看 效果 的 示例 
要 查看 jQuery UI 效果 的 完整 演示 ， 请 访问 http://jqueryui.com/effect/#default。 


比如 ，shake 效 果 特 别 适合 强调 当前 不 能 接受 的 动作 。 这 个 效果 可 以 应 用 到 Resume 按 钮 无 效 
的 情况 下 ， 参 见 代码 清单 7-11。 


代码 清单 7-11 


$('<button>Resume</button>') .click(function(event) { 
event .preventDefault(); 
var Spaused = $('ul:paused'); 
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if (Spaused.length) { 
$spaused.cycle('resume'); 

} 

else { 
s(this) .effect('shake', { 

distance: 10 

站 

} 

}) .appendTo ($controls); 


以 上 代码 检查 了 $ ('ul:paused' ) 的 长 度 ， 确 定 页 面 中 是 否 存在 暂停 的 可 以 恢复 的 幻灯 片 。 
如 果 有 ， 则 像 以 前 一 样 执行 Cycle 的 *esume 操 作 。 和 否则， 就 执行 snake 效 果 。 我 们 看 到 ，shake 
效果 ( 与 其 他 效果 一 样 ) 有 很 多 选项 ， 用 于 微调 它 的 外 观 。 在 此 ， 我 们 设置 了 效果 的 distance 
比 默认 值 小 一 些 ， 以 便 在 有 人 单 击 时 比较 快 地 来 回 摇摆 。 








7.4.2 ”交互 组 件 


接 下 来 要 介绍 jQuery UI 中 的 交互 式 组 件 。 交互 式 组 件 就 是 一 组 行为 , 可 以 跟 自 定义 代码 结合 
起 来 生成 复杂 的 交互 式 应 用 。 例 如 ，Resizable 就 是 这 样 一 个 组 件 ， 这 个 组 件 可 以 让 用 户 通过 自然 
地 拖 动 把 元 素 调整 成 任意 大 小 。 

为 元 素 应 用 交互 行为 非常 简单 ， 只 需要 在 元 素 上 调用 与 组 件 同名 的 方法 即 可 。 例如 , 通过 调 
用 .resizable() 方 法 ， 就 可 以 把 图 书 书 名 区 域 变 成 可 以 调整 大 小 的 元 素 。 


代码 清单 7-12 
Sbooks.find('.title') .resizable(); 


文档 中 引用 了 jQuery UI 的 CSS 文 件 后 ,以 上 代码 就 会 在 书 名 所 在 盒 状 区 域 右 下 角 添 加 一 个 调 
整 大 小 的 手柄 。 拖 动 这 个 手柄 就 可 以 修改 这 个 区 域 的 宽度 和 高 度 ， 如 图 7-5 所 示 。 














Creating Mobile 
Apps with 
jQuery Mobile 








图 7-5 


想必 读者 已 经 猜 到 了 ,这 些 方法 都 可 以 接受 很 多 自 定义 的 选项 。 比 如 ,假设 我 们 想 限 制 只 能 
调整 垂直 方向 上 的 高 度 ， 通 过 指定 应 该 添加 的 拖 劲 手柄 即 可 ， 参 见 代 码 清单 7-13。 


代码 清单 7-13 


Sbooks.find('.title') .resizablel({ 
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handles: 's' 


})3 


代码 中 的 s 表 示 south ( 也 就 是 底部 )， 即 在 区 域 底部 添加 拖 动 手柄 。 于 是 ， 这 个 区 域 就 只 能 
调节 高 度 了 ， 如 图 7-6 所 示 。 





Creating Mobile Apps 
with jQuery Mobile 





这 些 组 件 与 Resizable 类 似 ， 可 以 配置 很 多 选项 。 要 了 解 这 些 组 件 及 其 选项 ， 


其 他 交互 式 组 件 
六 jQuery UI 还 包括 其 他 交互 式 组 件 , 比如 Draggable、Droppable 和 Sortable。 
请 访问 http://jqueryui.com/。 





7.4.3 ”部 件 


除了 交互 式 组 件 之 外 , jQuery UI 库 中 还 提供 了 一 批 可 靠 的 用 户 界面 部 件 。 无 论 从 外 观 还 是 功 
能 上 看 , 这 些 “ 开 箱 即 用 ”的 部 件 都 非常 类 似 我 们 熟悉 的 桌面 应 用 程序 中 的 相应 元 素 。 有 些 部 件 
十 分 简单 ， 例 如 Button 部 件 仅仅 是 用 来 增强 页 面 上 的 按钮 和 链接 的 ， 具有 相对 更 漂亮 一 些 的 样式 
和 翻转 状态 。 

要 为 页 面 中 所 有 的 按钮 添加 上 述 外 观 和 行为 极其 简单 ， 参 见 代码 清单 7-14。 
代码 清单 7-14 

$ (document) .ready (function() { 


s('button') .button(); 
} 3 





在 引用 jQuery UI Smoothness 主 题 及 样式 表 的 情况 下 ， 这 些 按钮 就 会 有 平滑 、 有 和 斜面 的 外 观 ， 
如 图 7-7 所 示 。 








Pause Resume 














图 7-7 
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与 其 他 UI 部 件 和 交互 式 组 件 一 样 ，Button 部 件 也 可 以 接受 一 些 选 项 。 比 如 ， 假 设 我 们 想 为 
页 面 中 的 两 个 按钮 提供 适当 的 图 标 ， 那 么 就 可 以 使 用 Button 部 件 随 附 的 大 量 预定 义 的 图 标 。 为 
此 ,需要 把 对 .button() 的 调用 分 成 两 次 , 分 别 为 每 个 按钮 指定 相应 的 图 标 ， 如 代码 清单 7-15 
所 示 。 


代码 清单 7-15 


$s('<button>Pause</button>') .click(function(event) { 
J 

I) buttorn(t 
icons: {primary: 'ui-icon-pause'} 

}) .appendTo ($controls); 

$s('<button>Resume</button>') .click(function(event) { 
’ 

}) .button({ 
icons: {primary: 'ui-icon-play'} 

}) .appendTo ($controls); 


代码 中 指定 的 primary 图 标 对 应 着 jQuery UI 主题 框架 中 的 标准 类 名 。 默认 情况 下 , primary 
图 标 显 示 在 按钮 文本 的 左 钢 ， 而 secondqary 图 标 则 显示 在 文本 右 侧 ， 如 图 7-8 所 示 。 




















Il Pause * Resume 











图 7-8 


其 他 部 件 相 对 来 说 要 更 复杂 一 些 。Slider 部 件 就 引入 了 一 个 全 新 的 表单 元 素 ， 它 与 HTMLS 的 
range 元 素 类 似 ， 但 却 能 兼容 所 有 主流 的 浏览 器 。 对 于 Slider 组 件 ， 可 以 自 定义 的 选项 就 更 
多 了 ， 参 见 代码 清单 7-16。 


代码 清单 7-16 


s('<div id="slider"></div>') .slider(t{ 
min: 0, 
max: S$('#books 1i').length - 1 

}) .appendTo ($controls); 


就 这 么 简单 地 调用 .slidqer() ， 即 可 把 一 个 <aiv> 元 素 转换 成 一 个 滑动 条 部 件 。 可 以 通过 拖 
动 或 按键 盘 上 的 方向 键 ( 考虑 无 障碍 性 ) 来 控制 滑动 条 ， 如 图 7-9 所 示 。 
























































图 7-9 


在 代码 清单 7-16 中 ， 我 们 将 滑动 条 的 最 小 值 指定 为 0， 最 大 值 指定 为 幻灯 片 中 最 后 一 本 书 的 
索引 值 。 然 后 ， 就 可 以 利用 这 个 滑动 条 来 手工 控制 幻灯 片 了 一 一 只 要 在 两 者 的 状态 发 生变 化 时 ， 
在 幻灯 片 和 滑动 条 之 间 同 步 发 送 消 息 即 可 。 
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为 了 响应 滑动 条 的 值 的 变化 ， 可 以 绑 定 一 个 由 滑动 条 触发 的 自 定义 事件 。 这 个 事件 名 为 
slidqe， 虽 然 它 不 是 原生 JavaScript 事 件 ， 但 在 jQuery 代码 中 ， 它 就 像 是 原生 事件 一 样 。 而 且 ， 监 
听 这 种 事件 也 不 用 显 式 地 调用 .on(), 只 要 把 事件 处 理 程序 传递 给 .sliger () 方 法 即 可 , 参见 代 
码 清单 7-17。 


代码 清单 7-17 

$('<div idq="slidqer"></dqiv>').slidqer({ 
min: 0， 
max: 5$('#books 1i').length - 1, 
slide: function(event, ui) { 

$books.cycle(ui.value); 

} 

}) .appendTo ($controls); 


无 论 什 么 时 候 调 用 sliae 回 调 函数 ,其 参数 ui 中 都 会 保存 着 部 件 相 关 的 信息 , 包括 滑动 条 当 
前 的 值 。 把 这 个 值 传递 给 Cycle 插件 ， 就 可 以 实现 通过 滑动 条 控制 幻灯 片 了 。 

当然 ,我们 还 需要 在 幻灯 变换 时 更 新 滑动 条 部 件 。 要 实现 相反 方向 的 通信 ， 可 以 使 用 Cycle 
的 before 回调 函数 ， 这 个 函数 会 在 每 次 幻灯 变换 时 触发 ， 参 见 代码 清单 7-18。 























代码 清单 7-18 


s(dqocument) .ready (function() { 
Var Sbooks = $('#books') .cyclel(l{ 

timeout: 2000, 7 
speed: 200, 

pause: true, 

before: function() { 

$('#slider') 
.slider('value', $('#books 1i').index(this)); 





上 ) 
}); 


在 before 回 调 函 数 中 ,我们 再 次 调用 了 . sliaer () 方 法 。 这 一 次 ,我们 给 它 传递 的 第 一 个 
参数 是 'value' ， 用 以 设置 滑动 条 的 新 值 。 用 jQuery UI 的 话 来 说 ， 这 个 value 是 Slider 的 一 个 方 
法 ， 尽 管 这 个 方法 是 通过 调用 .slider () 方 法 来 调用 的 ， 并 没有 使 用 它 的 方法 名 。 














”其 他 部 件 
Q jQuery UI 的 Datepicker、Dialog、Tabs 以 及 Accordion 等 部 件 都 有 一 些 
可 以 配置 的 选项 、 事 件 和 方法 。 要 详细 了 解 这 些 内 容 , 请 访问 http://jqueryui.com/。 


7.4.4 ”jQuery UI 主题 卷轴 





jQuery UI 库 最 近 增 添 的 一 项 名 为 ThemeRoller ( 主题 卷轴 ) 的 功能 ， 这 是 一 个 面向 UI 部 件 的 
基于 Web 的 交互 式 主题 引擎 。 有 了 ThemeRoller, 就 可 以 在 瞬间 创建 出 高 度 自 定义 、 专 业 化 的 元 素 。 


网 
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如 前 例 所 示 ,我 们 为 刚才 创建 的 按钮 和 滑动 条 只 应 用 一 种 主题 ; 在 没有 应 用 自 定义 设置 的 情况 下 ， 
这 个 主题 可 以 通过 ThemeRoller 输 出 ( 如 图 7-10 所 示 )。 

















ll Pause bp Resume 











图 7-10 


如 果 想 生成 男 一 套 不 同 的 样式 , 只 要 访问 http://jqueryui.com/themeroller/, 根据 需要 改 几 个 选 
项 , 然后 单 击 Download Theme 按 钮 即 可 。 下载 后 的 样式 表 文件 及 图 像 被 打包 在 一 个 .zip 文件 中 ， 
将 该 文件 解压 缩 至 适当 文件 夹 后 ， 即 可 使 用 它们 。 例 如 ,通过 选择 不 同 的 颜色 和 纹理 ,就 可 以 在 
几 分 钟 内 把 前 面 的 对 话 框 外 观 修改 成 如 图 7-11 所 示 。 

















图 7-11 


7.5 jQuery Mobile 插件 库 





全 


前 面 介 绍 了 jQuery UI 库 ， 它 能 帮 有 我们 构建 起 完善 的 用 户 界 面 , 也 解决 了 很 多 难题 。 但 是 ,还 
有 另 一 类 问题 需要 应 对 , 那 就 是 在 移动 设备 中 优雅 地 展示 页 面 和 交互 。 如 果 你 需要 为 智能 手机 和 
平板 电脑 创建 网 站 或 应 用 ， 那 可 以 考虑 jQuery Mobile 项 目 。 

与 jQuery UI 类 似 , jQuery Mobile 同 样 由 一 组 相关 的 组 件 构成 , 可 以 按 需 取 用 , 又 能 无 颖 结合， 
流畅 运行 。jQuery Moblie 提 供 Ajax 驱 动 的 导航 系统 、 面 向 移动 设备 优化 的 交互 式 元 素 ， 以 及 高 级 
的 触摸 事件 处 理 程序 。 同 样 与 jQuery UI 类 似 ， 要 探索 jQuery Mobile 的 所 有 功能 也 不 容易 ， 为 此 我 
们 只 看 几 个 简单 的 例子 ， 具 体 细 节 请 大 家 自己 参考 网 上 的 文档 。 

















了 要 下 载 jQuery Mobile 并 浏览 其 文档 和 演示 , 请 访问 : http://jquerymobile.com。 
NA 我 介 Mobile 的 例子 要 使 用 Ajax 技术 ， 因 此 还 需要 准备 Web 服 务 器 。 相 
关 信 息 请 参考 第 6 章 。 


7.5.1 HTML5 自 定 义 数 据 属 性 


到 目前 为 止 ， 为 演示 插件 功能 ,本 章 的 例子 一 直 在 使 用 插件 提供 的 JavaScript API。 我 们 也 了 
解 了 jQuery 对 象 方法 、 全 局 函数 和 自 定义 选择 符 等 几 种 插件 提供 给 脚本 的 服务 。jQuery Mobile 同 
样 也 具备 这 些 人 人口 点 , 但 与 之 交互 最 常见 的 方法 还 是 使 用 HTML5 的 data-* 属 性 。 
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HTML5 规 范 人 允许 我 们 在 元 素 中 插入 任何 需要 的 属性 ， 只 要 该 属性 前 级 data- 即 可 。 这 种 属 
性 在 页 面 泻 染 期 间 会 被 忽略 , 但 jQuery 脚本 却 可 以 访问 它们 。 在 页 面 中 包含 了 jQuery Mobile 之 后 ， 
脚本 可 以 扫描 页 面 中 的 aata-* 属 性 ， 然 后 为 相应 的 元 素 添 加 适合 移动 设备 的 特性 。 








jQuery Mobile 需 要 找到 一 些 自 定义 的 数据 属性 。 第 12 章 将 详细 介绍 如 何 通过 
一 ”脚本 操作 数据 属性 。 





基于 jQuery Mobile 的 这 种 设计 , 我 们 可 以 不 用 编写 JavaScript 代 码 即 可 在 这 里 演示 它 的 一 些 强 
大 功能 。 














7.5.2 ”移动 导航 


jQuery Mobile 中 最 重要 的 一 个 功能 , 就 是 把 页 面 中 的 链接 转换 成 Ajax 驱动 的 导航 。 转 换 之 后 ， 
导航 将 具有 一 些 简单 的 动画 效果 ， 同 时 还 能 保留 标准 的 浏览 锅 历 史记 录 。 下 面 就 来 看 一 个 例子 ， 
先 看 看 示例 页 面 ， 其 中 包含 一 些 指向 几 本 图 书 的 链接 〈 与 前 面 构建 幻灯 片 时 用 到 的 页 面相 同 ): 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Book Browser</title> 
<link rel="stylesheet" href="booklist.css" type="text/css" /> 
<script src="jquery.js"></script> 

</head> 

<body> 











<div> 
<div> 
<h1>Selectedq jQuery Books</h1> 
</div> 


<div> 
<ul> 
<l1i><a href="jq-game.html">jQuery Game Development 
Essentials</a></1i> 
<l1i><a href="jqmobile-cookbook.html">jQuery Mobile 
Cookbook</a></1i> 
<l1i><a href="jquery-designers.html">jQuery for 
Designers</a></1i> 
<li><a href="jquery-hotshot.html">jQuery Hotshot</a></1i> 
<li><a href="jqui-cookbook.html">jQuery UI Cookbook</a></1i> 
<l1i><a href="mobile-apps.html">Creating Mobile Apps with 
jQuery Mobile</a></1i> 
<l1i><a href="drupal-7.html">Drupal 7 Development by 
Example</a></1i> 
<l1i><a href="wp-mobile-apps.html">WordPress Mobile 
Applications with PhoneGap</a></1i> 
</ul> 
</div> 
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</div3 
</body> 
</html> 
[ 在 下 载 到 的 本 章 代 码 中 ， 完 成 后 的 HTML 页 面 名 为 mobile.html。 | 








现在 , 页 面 中 还 没有 加 载 jQuery Mobile ,因此 浏览 器 会 使 用 默认 样式 泻 染 它 , 如 图 7-12 所 示 。 
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Carrier 分 8:38 AM 
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图 7-12 
接 下 来 ,我 们 就 修改 文档 的 <nead> 部 分 ， 引 用 jQuery Mobile 及 其 样式 表 : 


<head> 
<title>jQuery Book Browser</title> 
<meta name="viewport" 
content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="booklist.css" 
type="text/css" /> 
<link rel="stylesheet" 
href="jquery.mobile/jquery.mobile.css" type="text/css" /> 
<script src="jquery.js"></script> 
<script src="jquery.mobile/jquery.mobile.js"></script> 
</head> 


寺 别 要 注意 ， 这 里 添加 了 一 个 <meta> 标 签 ， 用 于 定义 页 面 的 视 口 (viewport )。 这 个 声明 是 
告诉 浏 览 器 将 其 页 面 内 容 缩放 到 恰好 填 满 设备 的 宽度 。jQuery Mobile 的 样式 也 应 用 到 了 页 面 上 ， 
页 面 文 本 变 成 了 无 衬 线 字体 ， 字 号 也 变 大 了 ， 还 添加 了 颜色 和 间距 ， 如 图 7-13 所 示 。 
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图 7-13 





el 
府 


FE 来 提供 








为 了 创建 导航 ,jQuery Mobile 需 要 理解 页 面 结构 。 为 此 , 我 们 要 使 用 data-role 忆 


这 些 信息 : 





<div data-role="page"> 
<div data-role="header"> 
<hil>Selected jQuery Books</h1> 
</div> 





<div data-role="content"> 
<ul> 
<l1i><a href="jq-game.html">jQuery Game Development 
Essentials</a></1i> 
<li><a href="jqmobile-cookbook.html">jQuery Mobile 
Cookbook</a></1i> 
<li><a href="jquery-designers.html">jQuery for 
Designers</a></1i> 
<l1i><a href="jquery-hotshot.html">jQuery Hotshot</a></1i> 
<li><a href="jqui-cookbook.html">jQuery UI Cookbook</a></1i> 
<l1i><a href="mobile-apps.html">Creating Mobile Apps with 
jQuery Mobile</a></1i> 
<li><a href="drupal-7.html">Drupal 7 Development by 
Example</a></1i> 
<l1i><a href="wp-mobile-apps.html">WordPress Mobile 
Applications with PhoneGap</a></1i> 
</ul> 
</div> 
</div> 


刷新 页 面 , jQuery Mobile 发 现 了 页 面 标题 , 于 是 就 泻 染 出 一 个 标准 的 横 跨 页 面 的 移动 版 标题 ， 
如 图 7-14 所 示 。 











4 
S| 
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图 7-14 


在 标题 文本 过 长 时 , jQuery Mobile 会 将 其 截断 , 并 在 未 尾 加 上 省 略 号 。 在 此 ,只 要 旋转 手机 ， 
变 成 横向 摆 放 ， 就 可 以 看 到 完整 的 标题 了 (如 图 7-15 所 示 )。 
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图 7-15 








更 重要 的 是 , 这 些 就 是 创建 Ajax 导 航 的 所 有 代码 。 在 链接 指向 的 页 面 中 , 我们 使 用 了 类 似 的 
标记 : 


<div data-role="page"> 
<div data-role="header"> 
<h1l>WordPress Mobile Applications with PhoneGap</h1l> 
</diyv> 
<div data-role="content"> 
<img src="images/wp-mobile-apps.jpg" alt="WordPress Mobile 
Applications with PhoneGap" /> 
<div class="title">WordPress Mobile Applications with 





PhoneGap</div> 
<div class="author">Yuxian Eugene Liang</div> 
</div> 
</div> 
冬 | 
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点 击 页 面 中 的 链接 ，jQuery Mobile 会 通过 Ajax 调用 加 载 相 应 的 页 面 ， 取 得 页 面 中 标记 为 
data-role="page" 的 部 分 ， 通 过 渐变 过 渡 显 示 出 来 ( 如 图 7-16 所 示 )。 


9:11 AM 
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7.5.3 ”一 个 文档 支持 多 个 页 面 


除了 能 通过 Ajax 加 载 其 他 文档 ,jQuery Mobile 还 可 以 基于 包含 所 有 内 容 的 单个 文档 实现 同样 
的 导航 功能 。 为 演示 这 一 点 ， 只 要 在 文档 链接 中 使 用 标准 的 # 符 号 ， 同 时 就 像 标 记 独 立 文档 一 样 
使 用 data-role="page" 属 性 标记 那些 内 容 区 块 : 


<div data-role="page"> 
<div data-role="header"> 
<hil>Selected jQuery Books</h1> 
</div> 























<div data-role="content"> 
<ul> 
<l1i><a href="#jq-game">jQuery Game Development 
Essentials</a></1i> 
<l1i><a href="#jqmobile-cookbook">jQuery Mobile 
Cookbook</a></1i> 
<l1i><a href="#jquery-designers">jQuery for 
Designers</a></1i> 
<l1i><a href="#jquery-hotshot">jQuery Hotshot</a></1i> 
<l1i><a href="#jqui-cookbook">jQuery UI Cookbook</a></1i> 
<l1i><a href="#mobile-apps">Creating Mobile Apps with jQuery 
Mobile</a></1i> 
<l1i><a href="#drupal-7">Drupal 7 Development by 
Example</a></1i> 
<l1i><a href="wp-mobile-apps.html">WordPress Mobile 
Applications with PhoneGap</a></1i> 
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</ul> 
</div> 
</div> 


<div id="jq-game" data-role="page"> 
<div data-role="header"> 
<h1l>jQuery Game Development Essentials</h1L> 
</div> 
<div data-role="content"> 
<img src="images/jq-game.jpg" alt="jQuery Game Development 
Essentials" /> 
<div class="title">jQuery Game Development Essentials</div> 
<div class="author">Salim Arsever</div> 
</div> 
</div> 


至 于 这 两 种 技术 如 何 选择 , 取决 于 你 自己 。 使 用 独立 的 文档 保存 内 容 , 可 以 在 需要 时 再 加 载 ， 
但 代价 就 是 请 求 多 个 页 面 会 影响 速度 。 


7.5.4 交互 式 元 素 


jQuery Mobile 中 的 大 部 分 组 件 都 是 交互 式 元 素 。 这 些 元 素 可 用 于 增强 基本 的 网 页 功能 ， 让 页 
面 元 素 更 适合 触 控 操作 。 折 苹 式 区 块 、 可 切换 开关 、 幻 灯 片 式 面板 ， 以 及 响应 式 表 格 ， 都 是 交互 
式 元 素 的 例子 。 





























jQuery UI 与 jQuery Mobile 有 相当 数量 的 元 素 是 重复 的 。 我 们 不 推荐 在 一 个 
页 面 中 同时 使 用 它们 ， 人 毕竟 最 重要 的 部 件 它们 各 自 都 有 。 


1. 列表 视图 
由 于 手机 屏幕 比较 小 , 所 以 很 多 手机 应 用 都 会 使 用 列表 。 通 过 jQuery Mobile 很 容易 将 页 面 中 
的 列表 转换 成 移动 应 用 中 的 列表 。 同 样 ， 只 要 添加 HTML5 数 据 属性 即 可 : 


<ul data-role="listview" data-inset="true"> 
<li><a href="#jq-game">jQuery Game Development 
Essentials</a></1i> 
<li><a href="#jqmobile-cookbook">jQuery Mobile Cookbook</a></1i> 
<li><a href="#jquery-designers">jQuery for Designers</a></1i> 
<li><a href="#jquery-hotshot">jQuery Hotshot</a></1i> 
'#jqui-cookbook">jQuery UI Cookbook</a></1i> 
<li><a href="#mobile-apps">Creating Mobile Apps with jQuery 
Mobile</a></1i> 
<li><a href="#drupal-7">Drupal 7 Development by Example</a></1i> 
<li><a href="wp-mobile-apps.html">WordPress Mobile Applications 
with PhoneGap</a></1i> 
</ul> 


添加 的 data-role="1listview" 人 告诉 jQuery Mobile 把 列表 中 的 链接 转换 成 适合 手指 触摸 自 
大 按钮 。 而 aata-inset="true" 则 用 于 给 列表 添加 一 个 漂亮 的 边框 ， 以 便 它们 与 周围 内 容 泾 ; 
分 明 。 结 果 呢 ， 就 是 我 们 非常 熟悉 的 原生 控件 的 样子 ， 如 图 7-17 所 示 。 
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图 7-17 


有 了 适合 手指 触摸 的 列表 后 ， 可 以 进一步 添加 筛选 搜索 框 ， 以 便 通 过 关键 词 来 得 选 (减少 ) 
列表 项 。 为 此 ， 只 要 再 添加 一 个 data-filter 属 性 即 可 : 























<ul data-role="listview" data-inset="true" data-filter="true"> 
结果 就 有 一 个 圆 角 输入 框 ， 内 骸 一 个 图 标 ， 出 现在 了 列表 上 方 ( 如 图 7-18 所 示 )。 


9:17 AM 
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图 7-18 


不 仅 搜 索 区 域 与 原生 控件 无 异 ， 就 连 其 功能 也 相差 无 几 ( 见 图 7-19 )， 而 我 们 则 连 一 行 代码 
都 没 写 过 。 
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图 7-19 





2. 工具 栏 按钮 

jQuery Mobile 增 强 的 另 一 个 用 户 界 面 元 素 是 工具 栏 按钮 。 如 同 jQuery UI 可 以 帮 我 们 标准 化 按 
钮 外 观 一 样 ，jQuery Mobile 也 针对 触摸 操作 优化 了 按钮 的 大 小 和 外 观 。 

某 些 情况 下 ,jQuery Mobile 甚 至 会 帮 我 们 创建 原来 没有 的 按钮 。 比 如 ， 移动 应 用 的 工具 栏 中 
经 常会 出 现 按钮 ， 其 中 一 个 标准 的 按钮 就 是 屏幕 左上 角 的 Back,， 点击 可 以 返回 上 一 层 。 只 要 给 页 
面 中 的 <div> 元 素 添 加 gata-add-back-btn 属 性 ， 就 可 以 得 到 这 么 一 个 按钮 : 

<div data-role="page" data-add-back-btn="true"> 

添加 了 这 个 属性 后 ， 导 航 到 每 个 页 面 ， 其 顶部 都 会 出 现 如 图 7-20 所 示 的 Back 按 钮 。 
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图 7-20 
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要 了 解 用 于 初始 化 和 配置 jQuery Mobile 部 件 的 所 有 HTML5 数 据 属性 ， 请 访 
问 : http://jquerymobile.com/。 


7.5.5 ”高 级 功能 








考虑 到 每 个 应 用 都 需要 定制 的 用 户 界面 和 更 复杂 的 交互 , jQuery Mobile 也 提供 了 稳定 可 靠 的 
工具 。 所 有 这 些 工具 的 文档 都 可 以 在 jQuery Mobile 官 网 查 到 。 虽 然 不 可 能 一 一 介绍 这 些 功 能 ,但 
我 们 在 此 可 以 简单 地 提 几 个 。 

口 移动 优化 的 事件 。 在 页 面 引用 jQuery Mobile 后 ，jQuery 代 码 就 可 以 访问 一 些 特殊 的 事件 ， 

比如 tap 、taphold 和 swipe。 这 些 事件 的 处 理 程 序 同样 以 .on () 方 法 绑 定 ， 与 绑 定 其 他 
事件 一 样 。 其 中 ，taphold 和 swipe 默 认 的 配置 (包括 触摸 时 长 ) 可 以 通过 $ .event . 
special.tabhold 和 gs$.event.special.swipe 对 象 来 修改 。 除 了 基于 触摸 的 事件 ， 
jQuery Mobile 还 支持 能 响应 滚动 、 屏 幕 翻转 和 页 面 导航 不 同 阶段 的 特殊 事件 ， 以 及 一 组 虚 
拟 的 鼠标 事件 ， 能 够 同时 响应 鼠标 和 触摸 操作 。 
主题 定制 。 与 jQuery UI 一 样 ，jQuery Mobile 也 提供 ThemeRoller ( http://jquerymobile. 
com/themeroller/ ) 用 于 定制 部 件 的 外 观 。 
PhoneGap 集 成。 使 用 PhoneGap ( Cordova ) 很 容易 将 通过 jQuery Mobile 构 建 的 网 站 转换 成 
原生 应 用 ， 从 而 能 够 访问 移动 设备 的 API ( 相机 、 加 速 计 和 地 理 定位 等 ) 和 应 用 商店 。 通 
过 $ .support.cors 和 $s .mobile.allowCrossDomainPages 属 性 ， 甚 至 可 以 访问 不 包 
含 在 应 用 中 的 页 面 ， 比 如 包含 在 远程 服务 器 中 的 页 面 。 







































































口 











口 





























7.6 小结 











本 章 介 绍 了 在 网 页 中 整合 第 三 方 插件 的 各 种 方式 。 其 中 ,着 重 讨论 了 Cycle、jQuery UI 和 jQuery 
Mobile， 并 展示 了 在 其 他 插件 中 同样 会 遇 到 的 一 些 模式 。 下 一 章 ， 我 们 探讨 如 何 利 用 jQuery 的 插 
件 架 构 开 发 不 同类 型 的 自 定义 插件 。 

















7.7 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
(1) 把 幻灯 片 的 切换 周期 延长 到 1.5 秒 ， 把 动画 效果 修改 为 下 一 张 幻 灯 片 淡 入 之 前 ， 前 一 张 幻 
灯 片 淡出 。 请 参考 Cycle 插 件 的 文档 ， 找 到 实现 上 述 功 能 的 选项 。 
(2) 设置 名 为 cyclePaused 的 cookie， 将 它 的 有 效 期 设置 为 30 天 。 
(3) 限制 书 名 区 域 ， 每 次 缩放 只 允许 以 10 像 素 为 单位 。 
(4) 修改 滑动 条 的 动画 ， 让 幻灯 片 切 换 时 ， 滑 动 块 从 当前 位 置 平滑 地 移动 到 下 一 个 位 置 。 
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(5) 不 像 以 前 那样 循环 播放 幻灯 片 ， 而 是 在 播放 完 最 后 一 张 幻灯 片 后 停止 。 当 幻灯 片 停止 播 
放 时 ， 也 禁用 相应 的 按钮 和 滑动 条 。 

(6) 创建 一 个 新 的 jQuery UI 主题 ， 让 部 件 背 景 为 浅 蓝 色 ， 文 本 为 深蓝 色 ， 并 将 这 个 自 定义 主 
题 应 用 到 我 们 的 示例 文档 上 。 

(7) 修改 mobile.html 中 的 HTML 代 码 ， 证 列表 视图 根据 书 名 的 字 第 一 个 字母 分 隔 开 来 。 可 以 
参考 jQuery Mobile 官 方 中 关 于 data-role="list-divider" 的 介绍 。 
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众多 的 第 三 方 插件 虽然 能 够 增强 我 们 的 编程 体验 , 但 有 时 候 我 们 还 需要 走 得 更 远 一 些 。 当 我 
们 编写 的 代码 可 以 供 其 他 人 其 至 我 们 自己 重用 的 时 候 ， 我 们 会 希望 把 这 些 代码 打包 成 一 个 新 插 
件 。 好 在 ， 这 个 过 程 与 编写 使 用 插件 的 代码 相 比 ， 不 会 复杂 多 少 。 

本 章 ， 我 们 将 学 习 以 下 内 容 : 
口 在 jQuery 命名 空间 中 添加 新 的 全 局 函数 ; 
口 添加 新 的 jQuery 方法 ， 以 操作 DOM 元 素 ; 
口 使 用 jQuery UI 插件 工厂 创建 完善 的 插件 ; 
口 对 外 发 布 完工 的 插件 。 


8.1 在 插件 中 使 用 $ 别 名 


在 编写 jQuery 插件 时 ,必须 假设 jQuery 库 已 经 加 载 到 了 页 面 中 。 可 是 , 我 们 不 能 假设 s 别 名 一 
定 可 用 。 第 3 章 曾经 讲 过 ，s$ .noconf1lict () 方 法 就 是 用 于 让 渡 这 个 快捷 方式 使 用 权 的 。 考 虑 到 
这 一 点 ， 我 们 自 定义 的 插件 就 应 该 始终 都 使 用 jQuery 这 个 名 字 来 调用 jQuery 方法 ,或 者 也 可 以 
在 内 部 定义 一 个 $ 别 名 。 

对 于 代码 比较 长 的 插件 来 说 ， 很 多 开发 人 员 都 觉得 不 能 使 用 $ 别 名 会 导致 代码 难以 理解 。 为 
了 解决 这 个 问题 , 我 们 可 以 在 插件 的 作用 域内 定义 这 个 快捷 方式 , 方法 就 是 定义 一 个 函数 并 马上 
调用 它 。 这 种 定义 并 立即 调用 函数 的 语法 通常 被 称 为 立即 调用 的 函数 表达 式 (IIFE，Immediately 


Invoked Function Expression ): 
























































(function($) { 
// 在 这 里 添加 代码 
}) (jQuery); 


这 个 包装 函数 只 接收 一 个 参数 ,我 们 通过 这 个 参数 传人 了 jQuery 对 象 。 这 个 参数 的 名 字 是 $， 
因此 在 这 个 函数 内 部 ， 使 用 $ 别 名 就 不 会 有 冲突 了 。 


8.2 添加 新 的 全 局 函数 


jQuery 内 置 的 某 些 功 能 是 通过 全 局 函数 提供 的 。 所 谓 全 局 函数 ， 实 际 上 就 是 jouery 对 象 的 
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方法 ,但 从 实践 的 角度 上 看 ， 它 们 是 位 于 jQuery 命名 空间 内 部 的 函数 。 

使 用 这 种 技术 的 一 个 典型 的 例子 就 是 $ .ajax() 函数 。$ .ajax() 所 做 的 一 切 都 可 以 通过 简 
单 地 调用 一 个 名 为 ajax () 的 常规 全 局 函数 来 实现 ,但 是 ， 这 种 方式 会 给 我 们 带 来 函数 名 冲突 的 
问题 。 通 过 把 这 个 函数 放 在 jQuery 的 命名 空间 内 ， 我 们 只 需 避 免 它 与 其 他 的 jQuery 方法 冲突 即 
可 。 对 想 要 使 用 插件 的 人 而 言 ，jQuery 命 名 空间 也 是 一 个 提醒 ， 即 要 使 用 这 个 插件 ， 必 须要 有 
jQuery 库 。 

核心 jQuery 库 提供 的 很 多 全 局 函数 都 是 实用 方法 ; 所 谓 实 用 方法 ， 就 是 一 些 常用 功能 的 快捷 
方式 ,但 即使 手工 编写 同样 功能 的 代码 也 不 是 很 难 。 数 组 处 理 方法 $.each() 、$ .map () 和 $ .grep () 
都 是 实用 方法 。 为 了 演示 这 些 实用 方法 的 创建 方式 ， 我 们 再 给 jQuery 核心 库 添加 两 个 小 函数 。 

要 向 jQuery 的 命名 空间 中 添加 一 个 函数 ,只 需 将 这 个 新 函数 指定 为 jQuery 对 象 的 一 个 属性 
即 可 参见 代码 清单 8-1。 
























































代码 清单 8-1 


(function($) { 
$.sum = function(array) { 




















// 在 这 里 添加 代码 
}; 
}) (jQuery); 
于 是 ,我 们 就 可 以 在 使 用 这 个 插件 的 任何 代码 中 ,编写 如 下 代码 : 
$.sum(); 


这 跟 一 个 基本 的 调用 没什么 两 样 ， 调 用 之 后 就 会 执行 函数 体内 的 代码 。 
这 个 求 和 函数 接受 一 个 数组 作为 参数 ,然后 把 数组 的 值 加 在 一 起 , 最 后 返回 结果 。 这 个 插 
的 代码 非常 简单 ， 如 代码 清单 8-2 所 示 。 











一 ~、 


件 





代码 清单 8-2 


(function($) { 
$.sum = function(array) { 
Var total = 0; 


$.each(array, function(index, value) { 
value = $.trim(value); 
value = parseFloat (value) || 0; 


total += value; 
}); 
return total; 
ja 
}) (jQuery); 
注意 ， 我 们 在 这 里 使 用 了 s$ .each () 方 法 遍历 了 数组 的 值 。 当 然 也 可 以 在 此 使 用 for 循环 ， 
但 既然 我 们 能 够 确定 页 面 会 在 加 载 插件 之 前 先 加 载 jQuery 库 ， 使 用 习以为常 的 语法 是 很 自然 的 。 
同样 ，$ .each () 的 好 处 在 于 它 的 第 一 个 参数 是 一 个 对 象 。 
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为 了 测试 这 个 新 插件 ， 我 们 创建 了 一 个 表格 ,其 中 包含 库存 的 食品 : 


<table id="inventory"> 
<thead> 
<tr class="one"> 
<th>Product</th> <th>Quantity</th> <th>Price</th> 
</tr> 
</thead> 
<tfoot> 
<tr class="two" id="sum"> 
<td>Total</td> <td></td> <td></td> 
</tr> 
<tr id="average"> 
<td>Average</td> <td></td> <td></td> 
</tr> 
</tfoot> 
<tbody> 
> 
<td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam 
</a></td> <td>4</td> <td>2.50</td> 
</tr> 
> 
<td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a> 
</td> <td>12</td> <td>4.32</tqd> 
</tr> 
i 
<td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe."> 
Gourmet Spam</a></td> <td>14</td> <td>7.89</td> 
</tr> 
</tbody> 
</table> 














下 载 代码 示例 
y 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 
档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完整 的 示例 
代码 : Packt Publishing 网 站 http:/www.packtpub.com/support， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


接 下 来 ,我们 再 写 几 行 脚本 ， 让 它 负 责 填 写 表格 中 表示 数量 之 和 的 单元 格 ， 参见 代码 清 
单 8-3。 


代码 清单 8-3 


$s (document) .ready (function() { 
Var Sinventory = $('#inventory tbody'); 
var quantities = $inventory.find('td:nth-child(2)') 
.map (function(index, qty) { 
return $ (qty).text(); 
}) -Get() 


网 
山 
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Var Sum = $.sum(gquantities); 
$s('#sum') .find('td:nth-child(2)') .text (sum); 
过 


通过 浏览 需 查 看 HTMI 页 面 的 结果 表明 ， 我 们 的 插件 工作 正常 ， 如 图 8-1 所 示 。 








Inventory 

Spam 4 2.50 
Egg 12 4.32 
Gourmet Spam 14 7.89 
Total 30 

Average 














添加 多 1 个 函 水 函数 


如 果 我 们 想 在 插件 中 提供 多 个 全 局 函数 ， 数 。 下面 , 我 们 再 来 增强 插 
件 ， 添 加 一 个 用 于 计算 数值 数组 平均 值 的 函数 ， 参 见 代 码 清单 8-4。 








代码 清单 8-4 


(function($) { 
$.sum = function(array) { 
Var total = 0; 


$.each(array, function(index, value) { 
Value = $.trim(value); 
value = parseFloat (value) || 0; 


total += value; 
过 
return total; 
js 
$.average = function(array) { 
if ($.isArray(array)) { 
return $.sum(array) / array.length; 
} 
return ''; 
}; 
}) (jQuery); 


为 了 方便 起 见 ， 我 们 使 用 了 $. sum () 插 件 作 为 辅助 ， 以 方便 地 返回 $ .average() 的 值 。 同 
时 ， 为 避免 出 错 ， 这 里 还 检测 了 传人 的 参数 ， 在 计算 平均 值 之 前 确保 它 是 一 个 数组 : 


























网 
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好 了 ， 现 在 第 二 个 方法 也 就 绕 了 ， 接 下 我 们 就 用 同样 的 方式 来 调用 它 ， 参 见 代码 清单 8-5。 


代码 清单 8-5 


$s(document) .ready (function() { 
Var Sinventory = $('#inventory tbody'); 
Var prices = $inventory.find('td:nth-child(3)') 
.map (function(index, qty) { 
return S$ (qty) .text(); 














}) .get (); 
Var average = $.average (prices); 
$s('#average') .find('td:nth-child(3)') .text (average.toFixed(2)); 
})3 
于 是 ， 平 均值 出 现 了 在 表格 的 第 三 栏 ， 如 图 8-2 所 示 。 
Product Quantity Price 
Spam 4 2.50 
Egg 12 4.32 
Gourmet Spam 14 7.89 
Total 30 
Average 4.90 
8-2 





1. 扩展 全 局 jQuery 对 象 | 
i 参见 代码 清 


事实 上 ， 利 用 $ .extend() 函数 ， 还 可 以 通过 另外 一 种 语法 来 定义 全 局 因数 ， 参 
单 8-6。 


代码 清单 8-6 


(function($) { 
$.extend({ 
sum: function(array) { 
Var total = 0; 


、 


$s.each(array, function(index, value) { 
Value = $.trim(value); 
value = parseFloat (value) || 0; 


total += value; 
})s 
return total; 
下 
average: function(array) { 
if ($.isArray (array)) { 
return $.sum(array) / array.length; 


图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


168 第 8 章 ”开发 插件 





} 











return ' 
} 
}); 
}) (jQuery); 
这 样 调用 $ .extend() 就 可 以 给 全 局 jQuery 对 象 添 加 属性 (如果 原来 有 相同 的 属性 ， 就 会 蔡 





换 原 来 的 属性 )。 这 样 也 定义 了 相同 的 $ .sum() 和 $ .average() 方 法 。 

2. 使 用 命名 空间 隔离 函数 

我 们 的 插件 在 jQuery 命名 空间 中 创建 了 两 个 独立 的 全 局 函数 。 但 这 样 写 有 可 能 污染 命名 空 
间 。 换 名 话说 ， 其 他 jQuery 插件 也 可 能 定义 相同 的 函数 名 。 为 了 避免 冲突 ， 最 好 的 办 法 是 把 属于 
一 个 插件 的 全 局 函数 都 封装 到 一 个 对 象 中 ， 如 代码 清单 8-7 所 示 。 


代码 清单 8-7 


(function($) { 
$s.mathUtils = { 
sum: function(array) { 
var total = 0; 


























$.each(array, function(index, value) { 
Value = $.trim(value); 
value = parseFloat (value) || o0; 


total += value; 
jo 
return total; 
jy 
average: function(array) { 
if ($.isArray (array)) { 
return $.mathUtils.sum(array) / array.length; 
} 
return “' 
} 
}; 
}) (jQuery); 


这 个 模式 的 本 质 是 为 所 有 的 全 局 函数 又 创建 了 一 个 命名 空间 ， 叫 做 jQuery.mathutils。 
虽然 我 们 还 称 它们 为 全 局 函数 ， 但 实际 上 它们 已 经 成 了 mathutils 对 象 的 方法 了 ， 而 
mathUtils 对 象 则 保存 在 jouery 对 象 的 属性 中 。 结 果 ， 在 调用 它们 时 就 必须 得 加 上 插件 的 名 


$s.mathUtils.sum(sum); 














$s.mathUtils.average (average); 

使 用 这 种 技术 ( 以 及 足够 独特 的 命名 空间 )， 就 能 够 避免 全 局 函数 污染 命名 空间 。 至 此 ， 我 
们 已 经 掌握 了 开发 插件 的 基本 方法 。 在 把 这 些 函 数 保存 到 名 为 jquery.mathutils.js 的 文件 中 之 后 ， 
就 可 以 将 其 包含 在 其 他 页 面 中 通过 其 他 脚本 来 使 用 这 些 函 数 了 。 
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对 于 仅 限于 个 人 使 用 的 函数 ,一 般 来 说 还 是 把 它 保 存在 项 目的 命名 空间 中 最 
方便 。 换 和 句 话说 ， 不 要 保存 在 jQuery 命名 空间 中 ， 而 要 选择 一 个 我 们 自己 的 全 
四 局 对 象 。 比 如 说 ， 可 以 将 1jQ 作 为 全 局 对 象 ， 那 么 $.mathUtils.sum() 和 

$s.mathUtils.average() 就 要 写成 1jQ.mathUtils.sum() 和 1jQ.math- 
Utils.average() 了 。 这 样 ， 就 可 以 彻底 避免 自 定义 的 插件 方法 与 第 三 方 插件 
方法 发 生命 名 冲突 。 


我 们 已 经 介绍 了 如 何 保护 命名 空间 ， 以 及 确保 jQuery 插件 假定 的 库 的 有 效 性 。 不 过 ， 这 些 都 
还 是 组 织 上 的 好 处 。 要 想 真 正体 验 到 jQuery 插件 的 威力 ， 还 需要 学 会 为 个 别 jQuery 对 象 实例 创建 
新 的 方法 。 























8.3 ”添加 jQuery 对 象 方法 


jQuery 中 大 多 数 内 置 的 功能 都 是 通过 其 对 象 实例 的 方法 提供 的 , 而 且 这 些 方 法 也 是 插件 之 所 
以 诱 人 的 关键 。 当 函数 需要 操作 DOM 元 素 时 ， 就 是 将 函数 创建 为 jQuery 实例 方法 的 好 机 会 。 

前 面 我 们 已 经 看 到 ， 添 加 全 局 函数 需要 以 新 方法 来 扩展 jQuery 对 象 。 添 加 实例 方法 也 与 此 
类 似 ,但 扩展 的 却 是 jQuery . fn 对 象 : 

jQuery.fn.myMethod = function() { 


alert ('Nothing happens.'); 
}3 















































| a jQuery.fn 对 象 是 jQuery.prototype 的 别名 ,使 用 别名 是 出 于 简洁 的 
考虑 。 


然后 ， 就 可 以 在 使 用 任何 选择 符 表 达 式 之 后 调用 这 个 新 方法 了 : 

$('div') .myMethod(); 

当 调用 这 个 方法 时 会 弹出 一 个 警告 框 〈 文 档 中 的 每 个 <aiv> 显 示 一 次 )。 由 于 这 里 并 没有 在 
任何 地 方 用 到 匹配 的 DOM 节 点 ， 所 以 为 此 编写 一 个 全 局 函数 也 是 一 样 的。 由 此 可 见 ， 一 个 合理 
的 实例 方法 应 该 包含 对 它 的 上 下 文 的 操作 。 



































8.3.1 对象 方法 的 上 下 文 


在 任何 插件 方法 内 部 ， 关 键 字 this 引 用 的 都 是 当前 的 jQuery 对 象 。 因 而 ， 可 以 在 this 上 面 
调用 任何 内 置 的 jQuery 方法 , 或 者 提取 它 包含 的 DOM 节 点 并 操作 该 节点 。 为 了 确定 可 以 怎样 利用 
对 象 的 上 下 文 ， 下 面 我 们 来 编写 一 个 小 插件 ， 用 以 操作 匹配 元 素 的 类 。 

这 个 新 方法 接受 两 个 类 名 ， 每 次 调用 更 换 应 用 于 每 个 元 素 的 类 。 尽 管 jQuery UI 有 一 个 健壮 
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的 .switchclass () 方 法 , 其 至 该 方法 都 支持 以 动画 方式 切换 类 , 但 为 了 演示 需要 , 我们 还 是 自 
己 再 来 写 一 个 吧 ， 参 见 代 码 清单 8-8。 


代码 清单 8-8 


// 未 完成 的 代码 
(function($) { 
$.fn.swapClass = function(classl, class2) { 
if (this.hasClass(class1)) { 
this.removeClass (class1) .addClass (class2); 
} 
else if (this.hasClass(class2)) { 
this.removeClass (class2) .addClass (class1); 
} 
j3 
}) (jQuery); 


$s (document) .ready (function() { 
$s('table') .click(function() { 
$('tr').swapClass('one', 'two'); 
3 
站 





首先 ,测试 每 个 匹配 的 元 素 是 否 已 经 应 用 了 class1， 如 果 是 ， 则 将 该 类 替换 成 class2。 然 
后 ， 表 测试 cl1ass2 并 在 必要 时 替换 成 class1。 如 果 两 个 类 都 不 存在 ， 则 什么 也 不 做 。 

在 使 用 这 个 插件 的 代码 中 ,我 们 为 表格 绑 定 了 click 人 处 理 程序 ， 当 单 击 表 格 时 在 每 一 个 行 上 
都 调用 .swapclass () 。 我 们 的 目的 是 想 把 表 头 行 的 类 one 切 换 成 two， 把 合计 行 的 类 two 切 换 
成 one。 然 而 ， 预 期 的 结果 并 没有 发 生 ， 如 图 8-3 所 示 。 

















Inventory 
Product Quantity Price 
Spam 4 2.50 
Egg 12 4.32 
Gourmet Spam 14 7.89 

Total 30 a 
Average 4.90 














图 8-3 





结 


结果 是 每 一 行 都 应 用 了 了 two 类。 为 了 纠正 这 个 问题 ,需要 基于 多 次 选择 的 元 素来 正确 地 处 理 
jQuery 对 象 。 


8.3.2 隐 式 迭代 








读者 大 概 还 记得 ,jQuery 的 选择 符 表达 式 可 能 会 匹配 零 、 一 或 多 个 元 素 。 因 此 ， 在 设计 插件 
时 必须 考虑 到 所 有 这 些 可 能 的 情况 。 然 而 ， 我 们 在 此 调用 的 .hasclass() 只 会 检查 匹配 的 第 一 
个 元 素 。 换 句 话 说， 我 们 应 该 独立 检查 和 操作 每 一 个 元 素 。 
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要 在 无 论 匹配 多 个 元 素 的 情况 下 都 保证 行为 正确 , 最 简单 的 方式 就 是 始终 在 方法 的 上 下 文 上 


调用 .each () 方 法 ; 这 样 就 会 执行 隐 式 迭代， 而 执行 隐 式 欠 代 对 于 维护 插件 与 内 置 方法 的 一 致 性 
是 至 关 重 要 的 。 


在 调用 的 .each() 方 法 内 部 ，this 依 次 引用 每 个 DOM 元 素 ， 因 此 可 以 调整 代码 依次 检测 每 
个 匹配 的 元 素 ， 并 为 它们 应 用 相应 的 类 ， 参 见 代 码 清单 8-9。 


代码 清单 8-9 


(function($) { 








$.fn.swapClass = function(classl1 
this.each(function() { 
Var Selement = $ (this); 
if ($element.hasClass(class1)) { 
Selement .removeClass (class1) 
} 
else if ($element.hasClass(class2)) { 
Selement .removeClass (class2) 
} 
}); 
ys 
}) (jQuery); 


， Class2) { 


.addClass (class2); 


.addClass (class1); 


RY this 的 含义 


注意 ! 在 对 象 方 法 体内 ， 关 键 字 this 引 用 的 是 一 个 jQuery 对 象 ， 但 在 每 次 
调用 的 .each () 方 法 中 ，this 引 用 的 则 是 一 个 DOM 元 素 。 


这 样 ， 再 单 击 表格 ， 切 换 类 的 操作 就 不 会 影响 到 不 带 有 任何 类 的 行 了 ， 如 图 8-4 所 示 。 [| 








Inventory 
Product Quantity Price 
Soam 3 
Egg 12 4.32 
Gourmet Spam 14 7.89 
Total 30 

Average 4.90 














图 8-4 
8.3.3 方法 连 级 


We a jQuery 用 户 也 应 该 能 够 正常 使 用 连 缀 行为 。 因 而 ， 我 们 必须 在 所 有 插 人 
方法 中 返回 一 个 jQuery 对 象 ， 除 非 相 应 的 方法 明显 用 于 取得 不 同 的 信息 。 返 回 的 jQuery 对 象 通常 


如 果 我 们 使 用 .each () 迭代 遍历 this， 那 么 可 以 只 返回 迭代 的 结果 ， 
参见 代码 清单 8-10。 
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代码 清单 8-10 


(function($) { 


$.fn.swapClass = function(classl, class2) 
return this.each(function() { 
var Selement = $ (this); 
if ($element.hasClass(class1)) { 
$element.removeClass (class1) .addClass (class2); 
} 
else if ($element.hasClass(class2)) { 


Selement .removeClass (class2) .addClass (class1); 


} 
3 
有 
}) (jQuery); 


前 面 在 调用 了 .swapclass () 之后， 如 果 想 对 元 素 再 执行 其 他 操作 ， 必须 通过 
新 取得 元 素 。 而 在 添加 return 之 后 ， 就 可 以 在 我 们 的 提 








8.4 提供 灵活 的 方法 参数 


























i 件 方法 上 面 连 绥 内 置 的 方法 了 。 





条 新 语句 重 


在 第 7 章 中 ， 我 们 看 到 了 一 些 通 过 调整 参数 来 使 搬 件 满足 自己 需求 的 例子 。 那 些 巧妙 构思 的 








插件 的 时 候 ， 也 应 该 替 用 户 考虑 到 这 一 点 。 











插件 通过 定义 恰当 的 默认 值 , 并 允许 我 们 覆盖 这 些 默 认 值 提供 了 极 大 的 灵活 怕 





E 在 轮 到 我 们 编写 


为 说 明 让 插件 用 户 定制 插件 行为 的 不 同方 式 , 我 们 来 看 一 个 例子 , 其 中 包含 可 以 调整 和 修改 
的 多 项 设置 。 这 个 例子 是 一 个 为 元 素 块 加 投影 的 插件 方法 。 同 样 的 效果 可 以 通过 高 级 的 CSS 技 术 
完成 , 但 我 们 这 里 要 使 用 一 个 更 “暴力 ”的 JavaScript 方 式 : 创建 一 些 部 分 透明 的 元 素 ， 然 后 和 





们 相继 排列 在 页 面 的 不 同位 置 上 ， 参 见 代码 清单 8-11。 


代码 清单 8-11 


(function($) { 
$s.fn.shadow = function() { 

















return this.each(function() { 
Var SoriginalElement = $ (this); 
for (var i = 0; i < 5; i++) { 
$soriginalElement 
.Clone() 
.Css({ 
position: 'absolute', 
left: SoriginalElement.offset().left + i, 








top: SoriginalElement .offset().top + i, 


margin: 0， 


zIndex: -1, 
opacity: 0.1 
}) 
图 灵 社 区 会 员 
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.appendTo('body'); 
} 
上 
}3 
}) (jQuery); 


对 于 每 个 调用 此 方法 的 元 素 ， 都 要 复制 该 元 素 一 定数 量 的 副本 ,调整 每 个 副本 的 不 透明 度 。 
然后 , 再 通过 绝对 定位 方式 ， 以 该 元 素 为 基准 按照 不 同 的 偏 移 量 定 位 这 些 副本 。 现 在 ,这 个 插件 
方法 不 接受 任何 参数 ， 因 此 调用 该 方法 很 简单 。 

$ (document) .ready (function() { 


$s('h1l').shadow!(); 
}); 


调用 结果 就 是 在 标题 下 方 添加 了 阴影 效果 ， 如 图 8-5 所 示 。 


























Inventory 
Product Quantity Price 
Spam 4 2.50 
Egg 这 4.32 
Gourmet Spam 14 7.89 
Total 30 

Average 4.90 








8-5 








接 下 来 , 我 们 就 赋予 这 个 插件 方法 一 些 灵 活性 。 这 个 方法 的 操作 取决 于 一 些 用 户 可 能 想 要 修 
改 值 。 可 以 把 这 些 值 提取 出 来 作为 参数 ， 以 便 用 户 根据 需要 修改 。 


8.4.1 参数 对 象 


在 介绍 jQuery API 时 ， 我 们 曾 看 到 过 很 多 将 对 象 作 为 ( .animate() 、$.ajax() 等 ) 方 
法 参数 的 例子 。 作 为 一 种 向 插件 用 户 公开 选项 的 方式 ， 对 象 要 比 刚刚 使 用 的 参数 列表 更 加 友 
好 。 对 象 会 为 每 个 参数 提供 一 个 有 意义 的 标签 ， 同 时 也 会 让 参数 次 序 变 得 无 关 紧 要 。 而 且 ， 
只 要 有 可 能 通过 插件 来 模仿 jQuery API， 就 应 该 使 用 对 象 来 提高 一 致 性 和 易 用 性 ,参见 代码 清 
单 8-12。 


代码 清单 8-12 


(function($) { 
$.fn.shadow = function(options) { 











return this.each(function() { 
Var SoriginalElement = $ (this); 
for (var i = 0; i < options.copies; i++) { 
SoriginalElement 
.Clone() 
.GSS({ 
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position: 'absolute', 
left: S$originalElement.offset().left + i, 
top: S$originalElement.offset().top + i, 
margin: 0， 
zIndex: -1, 
opacity: options.opacity 

}) 

.appendTo('body'); 








} 
9 
js 
}) (jQuery); 
这 样 , 副本 的 数量 和 不 透明 度 就 可 以 自 定义 了 。 在 这 个 插件 中 ,可 以 通过 函数 参数 options 
的 属性 来 访问 每 一 个 值 。 
再 调用 这 个 方法 则 需要 传递 一 个 包含 选项 值 的 对 象 ， 而 不 是 独立 的 参数 了 : 
$s(document) .ready (function() { 
s('h1').shadow(t{ 
copies: 3, 
opacity: 0.25 
})3 
站 站 
配置 能 力 得 到 了 改进 ， 但 每 次 都 必须 提供 两 个 选项 才 行 。 下 一 节 ， 我 们 就 来 解决 这 个 问题 ， 
看 看 怎么 让 用 户 可 以 忽略 任何 一 个 选项 。 


8.4.2 ”默认 参数 值 


随 着 方法 的 参数 逐渐 增多 ,始终 指定 每 个 参数 并 不 是 必须 的 。 此 时 , 一 组 合理 的 默认 值 可 以 
增强 插件 接口 的 易 用 性 。 所 幸 的 是 ,以 对 象 作 为 参数 可 以 帮 我 们 很 好 地 达成 这 一 目标 , 它 可 以 为 
用 户 未 指定 的 参数 自动 传人 默认 值 ， 参 见 代 码 清 单 8-13。 


代码 清单 8-13 


(function($) { 
$s.fn.shadow = function(opts) { 
var defaults = { 
copies: 5, 
opacity: 0.1 
}; 


Var options = $.extend(defaults, opts); 


























A 
}; 
}) (jQuery); 
在 这 个 方法 的 定义 中 ,我们 定义 了 一 个 新 对 象 ， 名 为 defaults。 实 用 也 数 $ .extend() 
可 以 用 接受 的 opts 对 象 参数 覆盖 aefaults 中 的 选项 ， 并 保持 选项 对 象 中 未 指定 的 默认 项 


不 变 。 
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接 下 来 ， 我 们 仍然 以 对 象 调 用 同一 个 方法 ， 但 这 次 只 指定 一 个 有 别 于 默认 值 的 不 同 参数 : 


s(dqocument) .ready (function() { 
$s('h1l').shadow!(t{ 
copies: 3 
和 


未 指定 的 参数 使 用 预先 定义 的 默认 值 。$ . extena ( ) 方 法 甚至 可 以 接受 nul11 值 , 在 用 户 可 以 
接受 所 有 默认 参数 时 ， 我 们 的 方法 可 以 直接 执行 而 不 会 出 现 JavaScript 错 误 。 
s(dqocument) .ready (function() { 


$s('h1l').shadow!(); 
四 








8.4.3 回调 函数 


当然 ， 方 法 参数 也 可 能 不 是 一 个 简单 的 数字 值 ， 可 能 会 更 复杂 。 在 各 种 jQuery API 中 经 常 可 
以 看 到 男 一 种 参数 类 型 ， 即 回调 函数 。 回 调 函 数 可 以 极 大 地 增加 插件 的 灵活 性 , 但 却 用 不 着 在 创 
建 择 件 时 多 编写 多 少 代码 。 

要 在 方法 中 使 用 回调 函数 , 需要 接受 一 个 函数 对 象 作为 参数 , 然后 在 方法 中 适当 的 位 置 上 调 
用 该 函数 ,例如 , 可 以 扩展 前 面 定义 的 文本 投影 方法 , 让 用 户 能 够 自 定义 投影 相对 于 文本 的 位 置 ， 
参见 代码 清单 8-14。 


代码 清单 8-14 


(function($) { 
$s.fn.shadow = function(opts) { 
var defaults = { 
copies: 5, 
opacity: 0.1, 
CopyOffset: function(index) { 
return {x: index, y: index}; 























} 
} 
Var options = $.extend(defaults, opts); 
return this.each(function() { 

Var SoriginalElement = $ (this); 

for (var i = 0; i < options.copies; i++) { 


Var offset = options.copyOffset (i); 
SoriginalElement 
.Clone() 
.Css({ 
position: 'absolute', 
left: S$originalElement.offset().left + offset.x, 
top: S$originalElement.offset().top + offset.y, 
margin: 0， 
zIndex: -1, 
opacity: options.opacity 
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}) 
.appendTo('body'); 
} 
有 
} 
}) (jQuery); 








投影 的 每 个 “切片 ”相对 于 原始 文本 都 有 不 同 的 偏 移 量 。 此 前 ， 这 个 偏 移 量 简单 地 等 于 切片 
的 索引 值 。 现 在 , 偏 移 量 都 根据 copyoffset () 函数 来 计算 , 而 这 个 函数 是 用 户 可 以 覆盖 的 参数 。 
例如 ， 用 户 可 以 在 两 个 方向 上 指定 负 值 偏 移 量 : 
$s(document) .ready (function() { 
s('h1').shadow(t 


copyOffset: function(index) { 
return {x: -index, y: -2 * index}; 











这 样 会 导致 投影 大 加 起 来 并 向 左上 方 〈 不 是 向 右 下 方 ) 延伸 ， 如 图 8-6 所 示 。 





InNventory 
Product Quantity Price 
Spam 4 2.50 
Egg 12 4.32 
Gourmet Spam 14 7.89 
Total 30 2 4 
Average 4.90 














图 8-6 


回调 函数 可 以 像 这 样 简单 地 修改 投影 方向 ,也 可 以 根据 插件 用 户 的 定义 ,对 投影 位 置 作出 更 
复杂 的 调整 。 如 果 未 指定 回调 函数 ， 则 会 使 用 默认 行为 。 





8.4.4 可 定制 的 默认 值 


我 们 在 前 面 已 经 看 到 了 ， 通 过 为 方法 参数 设 定 合 理 的 默认 值 ， 能 够 显著 改善 用 户 使 用 插件 的 
体验 。 但是， 到 底 什 么 默认 值 合理 有 时 候 也 很 难说 。 如 果 用 户 脚本 会 多 次 调用 我 们 的 插件 ， 每 次 
调用 都 要 传递 一 组 不 同 于 默认 值 的 参数 ,那么 通过 定制 默认 值 就 可 以 减少 很 多 需要 编写 的 代码 量 。 

要 支持 默认 值 的 可 定制 ,需要 把 它们 从 方法 定义 中 移出 ,然后 放 到 外 部 代码 可 以 访问 的 地 方 ， 
如 代码 清单 8-15 所 示 。 








代码 清单 8-15 


(function($) { 
$s.fn.shadow = function(opts) { 
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Var options = $.extend({}, $.fn.shadow.defaults, opts); 
Ha 


Ur 


.fn.shadow.defaults = { 

copies: 5, 

opacity: 0.1, 

copyOffset: function(index) { 
return {x: index, y: index}; 

} 
上 

}) (jQuery); 


默认 值 被 放 在 了 投影 插件 的 命名 空间 里 ， 可 以 通过 $ . fn .shadow.defaults 直 接 引 用 。 而 
对 $ .extend() 的 调用 也 必须 修改 ,以 适应 这 种 变化 。 由 于 现在 所 有 对 .shadow () 的 调用 都 要 重 
用 defaults 对 象 ， 因 此 不 能 让 $ .extend() 修 改 它 。 我 们 就 在 此 将 一 个 空 对 象 ( {} ) 作为 
$ .extend() 的 第 一 个 参数 ， 让 这 个 新 对 象 成 为 被 修改 的 目标 。 
于 是 , 使 用 我 们 插件 的 代码 就 可 以 修改 默认 值 了 , 修改 之 后 的 值 可 以 被 所 有 后 续 对 . shadow() 
的 调用 共享 。 而 且 ， 在 调用 方法 时 仍然 可 以 传递 选项 。 
s(dqocument) .ready (function() { 
$.fn.shadow.defaults.copies = 10; 
$s('h1l').shadow!({ 


copyOffset: function(index) { 
return {x: -index, y: index}; 








二 ) 
})3 





因为 在 此 提供 了 新 的 默认 值 , 以 上 脚本 会 创建 带 10 个 切片 的 投影 。 由 于 在 调用 方法 时 提供 了 [本 本 
copyoffset 回 调 函 数 ， 所 以 投影 也 将 朝向 左下 方 ， 如 图 8-7 所 示 。 

















Product Quantity Price 
Spam 4 2.50 
Egg 12 4.32 
Gourmet Spam 14 7.89 
Total 30 
Average 4.90 
8-7 


8.5 使 用 jQuery UI 部 件 工厂 创建 插件 
在 第 7 章 我 们 看 到 过 ，jQuery UI 也 提供 了 一 套 部 件 ， 这 些 部 件 本 身 是 插件 ， 只 不 过 用 于 生成 
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特定 的 UI 元 素 , 例如 按钮 或 滑动 条 。 这 些 部 件 对 JavaScript 开 发 人 员 而 言 , 有 一 组 非常 统一 的 API， 
因而 学 习 起 来 非常 简单 。 如果 我 们 自己 要 编写 的 插件 会 创建 新 的 用 户 界面 元 素 , 通常 最 好 以 扩展 
jQuery UI 库 的 方式 来 实现 。 

每 个 部 件 都 会 包含 一 组 复杂 的 功能 ,但 所 幸 的 是 ， 这 们 不 需要 自己 承担 这 些 复杂 性 。jQuery 
UI 库 的 核心 包含 了 一 个 工厂 方法 ， 叫 $ .wigdget () ， 这 个 方法 能 帮 有 我 们 做 很 多 事情 。 使 用 这 个 方 
法 可 以 确保 我 们 的 代码 达到 所 有 jQuery UI 部 件 用 户 认 可 的 API 标 准 。 

使 用 部 件 工厂 创建 的 插件 具有 很 多 不 错 的 特性 。 只 要 编写 少量 代码 , 就 可 以 额外 获得 这 些 功 
能 (其 至 更 多 );: 

(1) 插件 具有 了 “状态 ”， 可 以 检测 、 修 改 甚至 在 应 用 之 后 完全 下 覆 插件 的 原始 效果 ; 

(2) 自动 将 用 户 提 供 的 选项 与 定制 的 选项 合并 到 一 起 ; 

(3) 多 个 插件 方法 无 颖 组 合 为 一 个 jQuery 方法 ， 这 个 方法 接受 一 个 表明 要 调用 哪个 子 方法 的 

字符 串 ; 

(4) 搬 件 触发 的 自 定 义 事件 处 理 程序 可 以 访问 部 件 实例 的 数据 。 
事实 上 ， 鉴 于 这 些 功能 如 此 诱 人 , 在 构建 任何 适当 的 (无 论 与 UI 有 关 还 是 无 关 的 ) 复杂 插件 
时 ， 谁 都 希望 使 用 部 件 工厂 方法 。 






























































8.5.1 创建 部 件 


在 下 面 的 例子 中 ,我 们 要 编写 一 个 插件 为 元 素 添 加 自 定 义 的 提示 条 。 为 了 创建 这 个 提示 条 ， 
需要 为 页 面 中 的 每 个 元 素 创建 一 个 <aiv> 容 器 ,然后 在 鼠标 悬 停 在 元 素 上 时 ， 把 这 个 容 顺 放 在 相 
应 元 素 的 旁边 。 先 来 看 看 这 个 插件 的 代码 ( 代码 清单 8-16 )， 然 后 我 们 再 一 点 点 地 分 析 。 











在 最 近 的 版 本 中 ,jQuery UI 库 包 含 了 自己 内 置 的 提示 条 部 件 ， 这 个 部 件 比 
KW 我 们 例子 中 的 要 高 级 。 我们 这 个 部 件 会 窗 盖 内 置 的 .tooltip() 方 法 , 这 在 真实 
的 项 目 中 是 应 该 避免 的 。 但 出 于 学 习 演 示 的 目的 ， 这 样 却 可 以 验证 一 些 重要 的 

概念 EKA 口 





每 次 调用 $ .widget () 都 会 通过 部 件 工厂 创建 一 个 jQuery UI 插件 。 这 个 函数 接受 部 件 的 名 称 
和 一 个 包含 部 件 属性 的 对 象 作为 参数 。 部 件 名 称 必 须 带 命名 空间 ， 在 这 里 我 们 使 用 1jg 作 为 命名 
空间 ， 使 用 tooltip 作 为 插件 名 称 。 这 样 ， 在 jQuery 项 目 中 就 可 以 通过 .tooltip() 调 用 我 们 这 
个 插件 了 。 

我 们 要 定义 的 第 一 个 部 件 属性 是 ._create () : 


代码 清单 8-16 


(function($) { 
$.widget('ljq.tooltip', { 
_create: function() { 
this._ tooltipDiyvy = S('<div></div>") 
.addClass('1jq-tooltip-text ' + 
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'ui-widget ui-state-highlight ui-corner-all') 
.hide() .appendTo('body'); 
this.element 
.addClass('l1jq-tooltip-trigger') 
.on('mouseenter.1jq-tooltip', 
$.proxy (this._open, this)) 
.on('mouseleave.1jq-tooltip', 
$.proxy (this._close, this)); 
} 
})s 
}) (jQuery); 


这 个 属性 是 一 个 函数 ， 每 当 jQuery 对 象 中 每 个 匹配 的 元 素 调 用 .tooltip () 时 ， 部 件 工厂 就 
会 调用 它 。 


E 


1 
在 _create 函 数 内 部 ， 需 要 设置 将 来 要 显示 的 提示 条 。 为 此 ， 要 创建 一 个 <aiv> 元 素 并 将 其 
添加 到 文档 中 。 同 时 ， 将 对 这 个 元 素 的 引用 保存 在 this._tooltipDiv 中 以 备 将 来 使 用 。 

在 这 个 函数 的 上 下 文中 ，this 引 用 的 是 当前 部 件 实例 ， 可 以 通过 它 为 部 件 添加 任何 想 要 的 
属性 。 另外 , 部 件 实例 本 身 也 有 一 些 预定 义 的 属性 可 以 为 我 们 提供 便利 ; 特别 地 , this .element 
中 保存 着 一 个 jQuery 对 象 ， 这 个 对 象 指 向 最 初 选择 的 元 素 。 

在 此 ， 我 们 使 用 this .element 为 提示 条 的 触发 元 素 绑 定 了 mouseenter 和 mouseleave 处 
理 程序 。 这 些 处 理 程序 可 以 在 鼠标 悬 停 在 相应 元 素 上 面 时 显示 提示 条 ,而 在 鼠标 离开 时 隐藏 提示 
条 。 需 要 注意 的 是 ， 这 里 的 事件 名 也 要 加 上 与 插件 一 样 的 命名 空间 前 级。 我 们 在 第 3 章 曾 经 讨论 
过 ， 使 用 命名 空间 就 不 会 干扰 其 他 也 要 为 这 些 元 素 绑 定 处 理 程序 的 代码 。 

这 些 .on () 调 用 中 还 涉及 了 男 一 个 新 语法 : 把 处 理 程序 传递 给 $ .proxy () 函数 。 这 个 函数 会 
修改 方法 中 this 的 指向 ， 因 此 才能 在 ._open 函 数 中 引用 部 件 的 实例 。 

接 下 来 需要 定义 绑 定 到 mouseenter 和 mouseleave 的 ._open() 和 ._close() 函 数 : 





部 件 属性 (如 _create() ) 以 下 划 线 开头 ， 表 示 私 有 。 稍 后 我 们 会 讨论 公 
























































代码 清单 8-17 


(function($) { 
$s.widget('l1jq.tooltip', { 
_create: function() { 
fs hi 
Fs 


_open: function() { 
Var elementOffset = this.element.offset(); 
thigs._tooltipDiv.css({ 
position: 'absolute', 
left: elementOoffset.1left, 
top: elementOffset.top + this.element.height() 
}) .text (this.element.data('tooltip-text')); 
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this._ tooltipDiv.show!(); 
} 


_Close: function() { 
this. tooltipDiv.hide(); 
} 
过 
}) (jQuery); 


至 于 ._open () 和 ._close() 图 数 本 身 ， 其 实 也 没有 什么 好 解释 的 。 这 两 个 名 字 就 足以 表明 
它们 的 作用 ,不 过 它们 倒是 展示 了 怎么 在 部 件 中 创建 入 有 函数 , 那 就 是 在 函数 名 字 前 加 上 下 划 线 。 
在 打开 (open ) 提示 条 时 ， 使 用 CSS 定 位 将 它 放 到 合适 的 位 置 然 后 显示 它 ; 而 在 关闭 (close ) 提 
示 条 时 ， 隐 藏 它 即 可 。 

在 打开 提示 的 过 程 中 , 需要 用 相关 信息 来 填充 提示 条 。 为 此 ,我 们 用 到 了 .qata() 方 法 , 这 
个 方法 可 以 用 来 取得 和 设置 与 任何 元 素 相 关 的 数据 ,不 过 , 我 们 这 里 利用 了 这 个 方法 读 取 HTML5 
数据 属性 的 能 力 ， 取 得 了 每 个 元 素 的 daata-tooltip-text 属 性 的 值 。 

有 了 这 个 插件 之 后 ， 代 码 $('a') .tooltip() 就 可 以 让 鼠标 其 停 时 显示 提示 条 ， 如 图 8-8 
所 示 。 
































Inventory 











Spikn 4 2.50 
Nutritious and delicious! 4.32 
Gourmec Spam 14 7.89 
Total 30 
Average 4.90 
图 8-8 





这 个 插件 并 不 算 复杂 ,代码 也 不 长 , 但 它 却 浓缩 了 很 多 高 级 的 概念 。 为 了 充分 地 利用 这 些 高 
级 的 概念 ,首先 需要 把 这 个 部 件 变 成 有 状态 的 部 件 。 部 件 的 状态 允许 用 户 根据 需要 启动 和 禁用 部 
件 ， 甚 至 在 创建 之 后 完全 销毁 它 。 





8.5.2 ”销毁 部 件 

我 们 知道 ， 部 件 工厂 可 以 创建 新 的 jQuery 方法 。 在 我 们 的 例子 中 这 个 方法 就 是 .tooltip () ， 
不 传递 任何 参数 调用 它 ， 可 以 为 一 组 元 素 应 用 提示 条 部 件 。 不过, 除了 单纯 的 应 用 提示 条 ， 这 个 
方法 还 可 以 做 其 他 很 多 事情 。 这 时 候 , 需要 给 这 个 方法 传人 一 个 字符 串 参 数 ， 以 便 调 用 适当 的 子 
方法 。 

其 中 一 个 内 置 的 子 方法 是 destroy。 调用 .tooltip('destroy') 就 可 以 从 页 面 中 删除 这 个 
提示 条 部 件 。 然 后 部 件 工 厂 会 为 我 们 完成 大 部 分 工作 , 但 在 通过 _create 修 改 了 文档 ( 比如 这 里 
创建 了 用 于 保存 提示 条 文本 的 <aiv> ) 的 情况 下 ， 还 要 负责 将 其 清理 掉 ， 参 见 代码 清单 8-18。 
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代码 清单 8-18 


(function($) { 
$s.widget('1jq.tooltip', { 
_create: function() { 
YY 有 
}3 


destroy: function() { 
this. tooltipDiv.remove(); 
this.element 
.removeClass('l1jq-tooltip-trigger') 
OEE (LId= to0ltip.)y 
$ .Widget .prototype.destroy.apply (this, arguments); 
}; 


_open: function() { 
J ds 
}, 


_close: function() { 
A 
} 
}); 
}) (jQuery); 
新 写 的 代码 为 这 个 部 件 添加 了 一 个 新 属性 。 这 个 函数 撤销 之 前 所 做 的 修改 , 然后 调用 保存 在 
原型 对 象 中 的 destroy 自 动 完成 清理 工作 。 


AL 注意 ， 这 一 次 的 destrovy 前 面 并 没有 加 下 划 线 ， 这 是 因为 它 是 一 个 可 以 通 昌 
a 过 .tooltip('destroy') 调 用 的 公有 子 方法 。 


8.5.3 ”启用 和 禁用 部 件 


除了 被 完全 销毁 ， 也 可 以 临时 禁用 然后 再 在 将 来 重新 启用 部 件 。 内 置 的 enable 和 disable 
子 方法 可 以 帮 我 们 实现 部 件 的 启用 和 禁用 ,方法 是 将 this .options .disabled 的 值 设置 为 
true 或 false。 要 支持 这 两 个 子 方法 ,我 们 要 做 的 就 是 在 对 部 件 进行 任何 操作 前 先 检查 这 个 值 ， 
参见 代码 清单 8-19。 


代码 清单 8-19 


_open: function() { 
if (!this.options.disabled) { 
Var elementOffset = this.element.offset(); 
this. too0ltipDiv., Cses ({ 
position: 'absolute', 
left: elementOoffset.1left, 
top: elementOffset.top + this.element.height() 
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}) .text (this.element.data('tooltip-text')); 
this. tooltipDiv.show(); 
} 
} 


有 了 这 个 额外 的 检查 之 后 ,提示 条 就 会 在 调用 .tooltip('disable') 之 后 暂停 显示 ,而 在 
调用 .tooltip('enable') 之 后 恢复 显示 。 


8.5.4 接受 部 件 选项 


现在 , 我 们 要 考虑 让 部 件 可 以 定制 了 。 在 前 面 编 写 .shadow() 插件 时 , 我 们 已 经 体验 到 为 部 
件 提供 一 组 定制 的 默认 设置 , 然后 再 让 用 户 指定 的 选项 覆盖 默认 设置 是 一 种 很 友好 的 机 制 。 在 这 
个 过 程 中 ， 几 乎 所 有 工作 都 是 由 部 件 工厂 执行 的 ， 而 我 们 所 要 做 的 就 是 提供 一 个 options 属 性 ， 
如 代码 清单 8-20 所 示 。 


代码 清单 8-20 


options: { 
offsetX: 10, 
offsetY: 10, 
content: function() { 
return $(this) .data('tooltip-text'); 
} 
a 


这 个 options 属 性 就 是 一 个 对 象 , 其 中 应 该 包含 部 件 所 需 的 所 有 选项 , 这 样 用户 就 不 必 非 要 
提供 它们 了 。 在 此 , 我 们 提供 了 提示 条 相对 于 其 触发 元 素 的 水 平和 垂直 坐标 ， 以 及 为 每 个 元 素 生 
成 提示 的 函数 。 

在 我 们 的 代码 中 ， 唯 一 需要 用 到 options 属 性 的 就 是 ._open ( ) 方 法: 


代码 清单 8-21 


_open: function() { 
if (!this.options.disabled) { 
Var elementOffset = this.element.offset(); 
this._ tooltipDiyv.cGss(t{ 
position: 'absolute', 
left: elementOffset.left + this.options.offsetx, 
top: elementOffset.top + this.element.height() 
+ this.options.offsetYy 
}) .text (this.options.content.call(this.element[0])); 
this. tooltipDiv.show(); 
} 

































































ps 
在 包括 ._open () 在 内 的 子 方法 中 ， 可 以 通过 this .options 访 问 这 些 选项 。 通 过 访问 这 些 
选项 始终 都 可 以 保证 取得 正确 的 值 ， 要 么 是 默认 值 ， 要 么 是 用 户 提供 的 覆盖 默认 值 的 值 。 

现在 ， 不 用 传递 参数 也 还 是 可 以 向 页 面 中 添加 部 件 〈 比如， 直接 调用 .tooltip() )， 但 得 
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到 的 都 是 默认 行为 。 不 过 ， 提 供 选 项 则 将 覆盖 默认 行为 ， 例 如 .tooltip({foffsetX: -10， 
offsetX: 25}) 。 部 件 工厂 甚至 可 以 让 我 们 在 部 件 实例 化 之 后 再 修改 选项 ， 例 如 : .tooltip 
('option'，'offsetX'，20)。 下 次 再 访问 这 些 选 项 时 ， 就 会 取得 新 设置 的 值 。 


8.5.5 




















对 选项 变化 作出 响应 
如 果 需 要 立即 对 选项 变化 作出 响应 ,可 以 在 部 件 中 添加 一 个 _setoption 函 
数 ， 这 个 函数 负责 处 理 变化 ， 然 后 调用 _setoption 的 默认 实现 。 


添加 子 方法 





内 置 的 子 方法 确实 很 方便 ,但 有 时 候 我 们 可 能 想 为 自己 插件 的 用 户 提 供 更 多 “挂钩 "。 前 面 


已 经 介 




















如 过 如 何在 部 件 中 创建 私有 函数 ,实际 上 创建 公有 函数 ( 也 就 是 子 方法 ) 也 一 样 ， 唯 一 的 








区 别 在 于 部 件 的 属性 名 不 以 下 划 线 开头 。 知 道 了 这 一 点 ,要 创建 手工 打开 和 关闭 提示 条 的 子 方法 
就 非常 简单 了 ， 参 见 代码 清单 8-22。 


代码 清单 8-22 


open: function() { 


} 


中 
就 这 么 简单 。 通 过 添加 调用 私有 函数 的 子 方法 , 现在 就 可 以 使 用 .tooltip('open') 来 打开 
提示 条 ， 使 用 .tooltip('close') 来 关闭 提示 条 了 。 即 使 在 子 方法 中 什么 也 不 返回 ， 部 件 工 | 全 | 


this. open():; 


Close: function() { 
this._close(); 





























也 会 蔡 我 们 做 很 多 工作 ， 从 而 确保 连 缀 语法 可 以 正常 工作 。 
8.5.6 ”触发 部 件 事件 





真正 的 好 插件 不 仅 自己 扩展 jQuery， 而 且 还 能 为 其 他 代码 提供 机 制 来 扩展 它 。 提 供 这 种 扩展 
能 力 的 方法 之 一 就 是 支持 与 插件 相关 的 一 组 自 定义 事件 ,部 件 工 厂 同 样 可 以 让 这 个 过 程 变 得 很 简 




















单 ， 参 见 代 码 清单 8-23。 


代码 清单 8-23 


_open: function() { 


(!this.options.disabled) { 
Var elementOffset = this.element.offset(); 
this.,_ todoltiopDiv Ces (t{ 
left: elementOffset.left + this.options.offsetx, 
top: elementOffset.top + this.element.height() 
+ this.options.offsetY 
}) .text (this.options.content.call (this.element[0])); 
this. tooltipDiv.show(); 
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this. trigger('open'); 
} 
站 
_Close: function() { 
this._tooltipDiv.hide(); 
this. trigger('close'); 


} 

在 一 个 函数 中 调用 this._trigger() 可 以 让 代码 监听 新 的 自 定 义 事件 。 事 件 名 字 会 加 上 部 
件 名 作为 前 级 ， 因 而 不 必 担 心 它 会 与 其 他 事件 冲突 。 因 为 这 里 在 提示 条 的 _open 函 数 中 调用 了 
this._trigger('open')， 那么 每 次 打开 提示 条 的 时 候 都 会 分 派 tcoltipopen 事 件 。 而 在 这 
个 元 素 上 调用 .on('tooltipopen') 可 以 监听 这 个 事件 。 
虽然 这 些 内 容 其 实 也 只 涉及 创建 成 熟 完善 的 插件 的 皮毛 , 但 已 经 足够 让 我 们 了 解 如 何 创 建部 
件 , 创建 部 件 时 可 以 使 用 哪些 工具 ， 以 及 如 何 确保 部 件 符合 标准 了 。 这 样 创建 出 来 的 部 件 ， 能 
让 熟悉 jQuery UI 的 用 户 也 感觉 到 很 专业 。 


8.6 ”插件 设计 建议 


现在 , 我们 已 经 通过 创建 插件 演示 了 如 何 扩 展 jQuery 和 jQuery UTI， 下 面 我 们 就 列 出 前 面 介 绍 
过 的 和 一 些 未 介绍 过 的 插件 设计 建议 。 
口 为 避免 $ 别 名 与 其 他 库 发 生 冲突 , 可 以 使 用 jQuery, 或 者 在 立即 调用 的 函数 表达 式 (IIFE ) 
中 传人 $， 使 其 成 为 一 个 局 部 变量 。 

口 无 论 是 以 $.myPlugin 的 方式 扩展 jQuery, 还 是 以 $.fn.myPlugin 的 方式 扩展 jQuery 的 原 
型 ， 给 $ 命 名 空间 添加 的 属性 都 不 要 超过 一 个 。 更 多 的 公有 方法 和 属性 应 该 添加 到 插件 的 
命名 空间 中 (例如 , $ .myPlugin.publicMethod 或 $.fn.myPlugin.plugin Property )。 

口 别 忘 了 为 插件 提供 一 个 默认 选项 的 对 象 : $.fn.myPlugin.defaults = {size: 

'large'}。o 

口 要 允许 插件 用 户 有 选择 地 覆盖 任何 默认 选项 , 包括 影响 后 续 方 法 的 调用 ($. fn.myPlugin . 

defaults.size = 'medium'; ) 和 单独 调用 ($s('div') .myPlugin ({size: 'small'});)。 

口 多 数 情况 下 ， 扩 展 jQuery 原型 时 ( $ .fn.myPlugin ) 要 返回 this， 以 便 捅 件 用 户 通过 连 

缀 语法 调用 其 他 jQuery 方法 (如 s$ ('div') .myPlugin() .find('p') .addclass('foo') )。 

口 在 扩展 jQuery 原型 时 ( $ .fn.myPlugin )， 通 过 调用 this .each () 强 制 执行 隐 式 迭代 。 

口 合适 的 时 候 ， 利 用 回调 函数 支持 灵活 地 修改 插件 行为 ， 从 而 不 必修 改 插 件 代 码 。 

口 如 果 插 件 是 为 了 实现 用 户 界面 元 素 ， 或 者 需要 跟踪 元 素 的 状态 ,使 用 jQuery UI 部 件 工 厂 

来 创建 。 

口 利用 QUnit 等 测试 框架 为 自己 的 插件 维护 一 组 自动 的 单元 测试 ， 以 确保 插件 能 够 按 预期 工 

作 。 有 关 QUnit 的 更 多 信息 ， 请 参考 附录 B。 

口 使 用 Git 或 其 他 版 本 控制 系统 跟踪 代码 的 版 本 。 可 以 考虑 把 插件 公开 托管 到 Github 
(http://github.com ) 上 ， 以 便 其 他 人 帮 你 改进 。 
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口 在 把 自己 的 插件 提供 给 别人 使 用 时 , 务必 明确 许可 条 款 。 建 议 考 虑 使 用 MIT 许 可 , 这 也 是 
jQuery 使 用 的 许可 。 


分 发 插件 


遵从 上 述 建 议 ， 就 可 以 编写 出 清晰 、 可 维护 、 经 得 起 时 间 检 验 的 插件 来 。 如 果 你 的 插件 能 完 
成 有 用 、 可 重复 的 任务 ， 那 你 可 能 会 想 把 它 放 在 jQuery 社区 中 分 享 。 

除了 按照 上 面 所 述 准备 好 插件 的 代码 ， 还 应 该 在 分 发 插件 之 前 , 给 它 配 上 完整 的 文档 。 可 以 
选择 一 种 恰当 的 文档 格式 ， 也 可 以 利用 现 有 的 文档 标准 ， 例 如 JSDoc ( http://www.usejsdoc.org/ )。 
另外 ， 还 有 doco ( http://jashkenas.github.io/docco/ ) 和 dox ( https://github.com/visionmedia/dox ) 等 
可 以 自动 生成 文档 的 工具 。 不 过 ， 这 些 工 具有 赖 于 Node.js 等 的 安装 配置 ， 要 求 相对 高 一 些 。 无 
论 最 终 采用 什么 格式 ， 都 要 保证 把 与 插件 的 方法 相关 的 每 一 个 参数 、 每 一 个 选项 都 说 清楚 。 

可 以 把 插件 代码 和 文档 托管 到 任何 地 方 ， 不 过 建议 大 家 放 在 GitHub (http:/github.com ) 上 ， 
这 个 在 线 代 码 库 非 常 受 欢迎 。 为 了 把 我 们 编写 的 插件 公之于众 ， 可 以 在 官方 jQuery 插件 注册 表 
( http://plugins.jquery.com/ ) 中 提交 相关 信息 。 

关于 如 何 提供 捅 件 信息 和 在 注册 表 中 发 布 插件 的 说 明 ， 请 参考 http:/plugins.jquery. 
com/docs/publish/。 这 个 过 程 一 开始 可 能 有 点 麻烦 ， 因 为 涉及 添加 GitHub 代 码 库 的 帖子 接收 挂 钧 、 
创建 JSON 格 式 的 配置 文件 、 向 远程 代码 库 推送 打 了 标签 的 插件 。 无 论 如 何 , 说 明 还 是 挺 详细 的 ， 
而 且 描 述 得 很 清楚 。 如 果 需 要 更 多 帮助 ， 可 以 订阅 Freenode ( http://freenode.net ) 的 
#jquery-content IRC 频 道 ， 或 者 给 plugins@jquery.com 发 邮件 询问 。 









































8.7 小结 


本 章 ， 我 们 看 到 jQuery 核心 提供 的 功能 并 没有 限制 这 个 库 的 能 力 。 除 了 第 7 章 讨 论 的 那些 稳 
定 可 靠 的 插件 外 ， 我 们 也 可 以 方便 地 创建 自己 的 插件 ， 进 一 步 拓展 这 个 库 的 能 力 。 

我 们 创建 的 插件 涉及 各 种 特性 , 包括 使 用 jQuery 库 的 全 局 函数 、 操 作 DOM 元 素 的 jQuery 对 象 
方法 ， 以 及 令 人 胶 目 的 jQuery UI 部 件 。 通 过 有 效 地 使 用 这 些 工 具 ， 我们 可 以 把 jQuery 以 及 我 们 自 
己 的 JavaScript 代 码 ， 塑 造成 任何 想 要 的 形式 。 














8.8 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
“挑战 ”练习 有 一 些 难度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : 
http://api.jquery.com/。 
(1) 创建 新 的 名 为 .slideFadeIn() 和 .slideFadeout () 的 插件 方法 ， 把 不 透明 度 动 画 方 
法 .fadeIn() 和 .fadeout () 以 及 高 度 动画 方法 .slideDown () 和 .slideUp() 结 合 起 来 。 
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(2) 扩展 .shadow() 方 法 的 可 定制 能 力 ,， 让 插件 用 户 可 以 指定 元 素 副本 的 z 轴 索引 。 为 提示 条 
部 件 添加 一 个 isopen 子 方法 , 这 个 方法 应 该 在 提示 条 正在 显示 的 时 候 返 回 true, 而 在 其 
他 时 候 返 回 false。 

(3) 添加 代码 监听 我 们 部 件 触 发 的 Looltipopen 事 件 ， 并 在 控制 台中 记录 一 条 消息 。 

(4) 挑战 : 为 提示 条 部 件 提供 一 个 可 以 奉 代 的 content 选 项 ， 通 过 AJAX 取 得 链接 的 href 属 性 
指向 的 页 面 的 内 容 ， 然 后 将 取得 的 内 容 作 为 提示 条 的 文本 。 

(5) 挑战 : 为 提示 条 部 件 提供 一 个 新 的 effect 选 项 ， 如 果 指 定 该 选项 ， 则 应 用 以 该 名 字 ( 如 
explode ) 指定 的 jQuery UI 效果 显示 或 隐藏 提示 条 。 
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2009 年 1 月 ，jQuery 之 父 John Resig 发 表 了 一 个 新 的 JavaScript 开 源 项 目 Sizzle。 这 是 一 个 独立 
的 CSS 选 择 符 引 擎 ， 任 何 JavaScript 库 只 要 进行 少量 修改 甚至 不 必修 改 就 可 以 使 用 它 。 实 际 上 ， 
jQuery 从 1.3 版 开始 就 已 经 在 使 用 Sizzle 了。 
作为 一 个 组 件 ，Sizzle 在 jQuery 中 负责 解析 我 们 传人 $ () 函数 中 的 CSS 选 择 符 表 达 式 。 它 决定 使 
用 何 种 原生 的 DOM 方 法 来 构建 元 素 集合 , 以 便 通过 其 他 jQuery 方法 来 操作 这 些 元 素 。 一 方面 是 Sizzle 
引擎 ， 另 一 方面 是 jQuery 的 遍历 方法 ， 二 者 结合 起 来 为 我 们 提供 了 在 页 面 上 查找 元 素 的 得 力 工具 。 
我 们 在 第 2 章 已 经 学 习 了 各 种 基本 的 选择 符 和 遍历 方法 ， 对 jQuery 库 的 基本 功能 也 做 到 了 胸 
有 成 竹 。 本 章 作 为 进 阶 内 容 ， 将 介绍 : 
口 以 不 同 的 方式 使 用 选择 符 查 找 和 筛选 数据 ; 
口 编写 插件 以 添加 新 选择 符 和 DOM 遍 历 方法 ; 
口 优化 选择 符 表达 式 ， 提 高 执行 速度 ; 
口 理解 Sizzle 引 警 的 某 些 内 部 工作 原理 。 


9.1 深入 选择 与 遍历 


为 了 讨论 有 关 高 级 选择 符 与 遍历 的 内 容 , 我 们 需要 先 编写 一 些 脚本 , 以便 有 一 些 可 供 进一步 
讨论 更 高 级 选择 与 遍历 的 实例 依据 。 这 个 例子 是 一 个 HTML 页面， 其 中 包含 一 组 新 闻 列 表 项 。 所 
有 新 闻 列表 项 都 放 在 一 个 表格 中 , 可 供 我 们 试验 选择 行 与 列 的 各 种 不 同方 法 。 以 下 是 这 个 页 面 的 
代码 片段 : 


<div id="topics"> 
Topics: 
<a href="topics/all.html" class="selected">All</a> 
<a href="topics/community.html">Community</a> 
<a href="topics/conferences.html">Conferences</a> 
<!-- continued... --> 
</div> 
<table id="news"> 
<thead> 
站 七 于 和 
<th>Date</th> 
<th>Headline</th> 
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<th>Author</th> 
<th>Topic</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th COoLepans™ ">2011</th> 
</tr> 
< 
<td>Apr 15</td> 
<td>jQuery 1.6 Beta 1 Released</td> 
<td>John Resig</td> 
<td>Releases</td> 
</tr> 
< 
<td>Feb 24</td> 
<td>jQuery Conference 2011: San Francisco Bay Area</td> 
<td>Ralph Whitbeck</td> 
<td>Conferences</td> 
</tr> 
<!-- continued... --> 
</tbody> 
</table> 


下 载 代码 示例 
yl 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 
el 档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完 整 的 示例 
代码 : Packt Publishing 网 站 http://www.packtpub.com/support， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


通过 这 一 小 段 代码 , 大 致 能 够 看 出 整个 文档 的 结构 。 这 个 表格 包含 4 列 , 分 别 表示 日 期 ( Data )、 
标题 Comin 作者 ( Author ) 和 主题 ( Topic )。 此 外 ,表格 中 的 某 些 行 又 包含 年 度 “ 子 标题 ”， 
而 非 前 述 这 4 项 ， 如 图 9-1 所 示 。 

















jQuery News 

Topics: | Ai Community Conferences ” Documentation Plugins Releases Miscellaneous 

Date Headline Author Topic 

2011 = 

Apr 15 jQuery 1.6 Beta 1 Released John Resig Releases 

Feb 24 jQuery Conference 2011: San Francisco Bay Area Ralph Conferences 
Whitbeck 

Feb 7 New Releases, Videos & a Sneak Peek at the jQuery UI Grid Addy Osmani Plugins 

Jan 31 jQuery 1.5 Released John Resig Releases 

Jan30 API Documentation Changes Karl Swedberg Documentation 

Nov 23 Team Spotlight: The jQuery Bug Triage Team Paul Irish Community 

Oct4 New Official jQuery Plugins Provide Templating, Data John Resig Plugins 

Linking and Globalization 

Sep4 The Official jQuery Podcast Has a New Home Ralph Documentation 

Whitbeck 
图 9-1 
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在 标题 与 表格 之 间 ， 有 一 组 按 表 格 中 的 新 闻 主 题 分 类 的 文字 链接 。 而 我 们 的 第 一 个 任务 ， 
就 是 改变 这 些 链 接 的 行为 ， 实 现 对 表格 中 内 容 的 就 地 筛选 ， 从 而 避免 点 击 链接 跳 转 到 其 他 
页 面 。 


9.1.1 动态 筛选 表格 内 容 


为 了 通过 主题 链接 来 筛选 表格 内 容 ， 需 要 先 阻 止 每 个 链接 的 默认 行为 。 同 时 ,还 应 该 向 用 户 
反馈 当前 选择 了 哪个 链接 ， 如 代码 清单 9-1 所 示 。 


代码 清单 9-1 
$s (document) .ready (function() { 
$('#topics a').click(function(event) { 
event .preventDefault(); 
$('#topics a.selected') .removeClass('selected'); 
$s (this) .addClass('selected'); 
站 
用 


在 用 户 单 击 其 中 某 个 链接 时 , 先 删 除 所 有 主题 链接 的 selecteq 类 , 然后 再 把 selected 类 添 
加 到 用 户 单 击 的 链接 上 。 其 中 的 .preventDefault () 语 句 用 于 阻止 链接 打开 新 的 页 面 。 

接 下 来 ， 就 要 执行 实际 的 筛选 操作 了 。 解决 这 个 问题 的 第 一 步 ， 就 是 隐藏 所 有 不 包含 相关 主 
题 的 表格 行 ， 如 代码 清单 9-2 所 示 。 


代码 清单 9-2 
s(dqocument) .ready (function() { 
$('#topics a').click(function(event) { 
event .preventDefault(); 
Var topic = $ (this).text(); 





$('#topics a.selected') .removeClass('selected'); 
$s (this) .addClass('selected'); 


$('#news tr').show!(); 


if (topic != 'Al]l') { 
$s('#news tr:has (td) :not(:contains("' + topic + '"))') 
.hide(); 


上) 
}): 
在 此 , 我 们 把 链接 的 文本 保存 在 变量 topic 中 , 以 便 用 它 与 表格 中 的 文本 进行 比较 。 接 下 来 ， 
先 显示 表格 的 所 有 行 ， 而 如 果 主 题 不 是 AL1 则 隐藏 所 有 无 关 的 行 。 用 于 隐藏 无 关 的 行 的 选择 符 有 
些 复杂 ， 因 此 有 必要 在 这 里 讨论 一 下 : 


#news tr:has(td) :not(:contains ("topic")) 











网 
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这 个 选择 符 的 一 开始 很 直观 ， 就 是 用 #news tz 找 到 表格 中 的 所 有 行 。 在 接 下 来 筛选 元 素 
时 ， 使 用 自 定 义 选 择 符 :has () 。 这 个 选择 符 从 当前 被 选中 的 元 素 中 挑选 出 那些 包含 指定 元 素 
的 元 素 。 在 这 里 ， 我 们 排除 了 那些 标题 行 〈 例如 包含 年 度 的 行 )， 因 为 它们 都 不 包含 <tdq> 单 
元 格 。 

在 找到 包含 实际 内 容 的 表格 行 之 后 , 还 需要 找 出 哪些 行 与 用 户 选择 的 主题 相关 。 而 自 定 义 选 
择 符 :contains () 只 会 匹配 那些 某 个 单元 格 中 包含 指定 文本 的 行 ,在 它 的 外 面 再 加 上 :not () 选 
择 符 ， 也 就 得 到 了 不 包含 相关 主题 的 表格 行 ， 最 后 把 这 些 行 隐 藏 起 来 就 好 了 。 

以 上 代码 基本 上 可 以 使 用 , 但 是 新 闻 标 题 中 不 能 包含 主题 文本 。 也 就 是 说 ,我 们 必须 考虑 主 
题 文 本 包含 在 某 个 新 闻 标题 文本 中 的 可 能 性 ,为 了 排除 这 种 情况 ,需要 针对 每 一 行 多 做 一 些 检 测 ， 
如 代码 清单 9-3 所 示 。 


















































代码 清单 9-3 


$s (document) .ready (function() { 
$('#topics a').click(function(event) { 
event .preventDefault(); 
var topie = S$(this).text(); 
$('#topics a.selected') .removeClass('selected'); 
s(this) .addClass('selected'); 
$s('#news') .find('tr').show(); 


i (toOBLG ka TALL)Y 1 
$s('#news').find('tr:has(td)') .not (function() { 
return $(this) .children(':nth-child(4)') .text() == topic; 
}) .hide(); 


}); 
}); 
这 些 新 代码 用 DOM 遍 历 方法 代替 了 某 些 复杂 的 选择 符 表达 式 。 首先, .fina() 方 法 所 起 到 的 
作用 正如 之 前 代码 中 #news 与 tr 之 间 的 空格 。 但 是 ，.not () 方 法 在 这 里 完成 的 任务 则 是 之 前 
的 :not () 没 有 做 到 的 。 与 我 们 在 第 2 章 介绍 的 .filter() 方 法 类 似 ，.not () 可 以 接收 一 个 回调 
函数 ， 该 函数 将 在 检测 每 个 元 素 的 时 候 调用 。 如 果 这 个 函数 返回 true， 那 么 被 检测 的 元 素 就 会 
被 排除 在 结果 集 之 外 。 














.J ”选择 符 与 遍历 方法 
\ 使 用 选择 符 还 是 使 用 与 其 对 应 的 遍历 方法 ， 最 终 可 能 会 导致 性 能 上 的 差异 。 
本 章 后 面 还 会 继续 深入 讨论 这 个 话题 。 


在 .not () 方 法 的 筛选 函数 中 , 我 们 检测 每 一 行 的 子 元 素 , 查找 其 第 4 个 子 元 素 ( 即位 于 Topic 
列 的 单元 格 )。 对 第 4 个 子 元 素 中 的 文本 简单 地 作 一 下 测试 , 我 们 就 可 以 知道 是 否 应 该 隐藏 当前 这 
一 行 ， 结 果 如 图 9-2 所 示 。 
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Topics: All Community Documentation Plugins Releases Miscellaneous 














Date Headline Author Topic 

2011 

Feb 24 jQuery Conference 2011: San Francisco Bay Area Ralph Whitbeck Conferences 
Aug 24 jQuery Conference 2010: Boston Ralph Whitbeck Conferences 
Jun 14 Seattle jQuery Open Space and Hack Attack with John Resig Rey Bango Conferences 
Mar 15 jQuery Conference 2010: San Francisco Bay Area Mike Hostetler Conferences 
Oct22 jQuery Summit John Resig Conferences 

图 9-2 


9.1.2 ”为 表格 行 添加 条 纹 效果 


在 第 2 章 学 习 某 个 选择 符 的 时 候 曾 探讨 过 为 表格 中 的 行 交替 应 用 不 同 颜色 的 方式 。 我 们 知道 ， 
使 用 :even 和 :odd 自 定义 选择 符 可 以 迅速 实现 这 一 效果 ， 而 使 用 CSS 原 生 的 :ntn-child() 伪 类 
也 可 以 实现 同样 的 效果 ， 如 代码 清单 9-4 所 示 。 


代码 清单 9-4 
s(dqocument) .ready (function() { 
$s('#news').find('tr:nth-child(even)') .addClass('alt'); 


}); 
这 个 直观 的 选择 符 会 找到 每 个 偶数 行 , 而 每 年 的 新 闻 都 位 于 它们 自己 的 <tbody> 元 素 中 ， 
此 交替 效果 会 在 每 个 子 部 分 中 重新 开始 ， 如 图 9-3 所 示 。 








Date Headline Author Topic 

2011 

Apr 15 jQuery 1.6 Beta 1 Released John Resig Releases 

Feb 24 jQuery Conference 2011: San Francisco Bay Area Ralph Conferences 

Whitbeck 

Feb7 New Releases, Videos & a Sneak Peek at the jQuery UI Grid Addy Osmani Plugins 

Jan31 jQuery 1.5 Released John Resig Releases 

Jan 30 API Documentation Changes Karl Swedberg Documentation 

Nov 23 Team Spotlight: The jQuery Bug Triage Team Paul Irish Community 

Oct4 New Official jQuery Plugins Provide Templating, Data John Resig Plugins 
Linking and Globalization 











图 9-3 
如 果 想 实现 更 复杂 一 些 的 行 条 纹 ， 可 以 尝试 每 两 行 一 组 地 应 用 alt 类 。 换 句 话 说 ,给 前 两 行 
添加 这 个 类 ， 后 两 行 不 加 ， 依 此 类 推 。 为 此 ， 需 要 再 用 到 筛选 函数 ， 参 见 代 码 清单 9-5。 


代码 清单 9-5 
$s(document) .ready (function() { 


$s('#news tr').filter(function(index) { 
return (index % 4) < 2; 
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}) .addClass('alt'); 
有 站 


在 第 2 章 中 学 习 的 . filter () 和 代码 清单 9-3 : .not () 方 法 的 例子 中 ,筛选 函数 会 检测 (关键 
字 this 中 包含 的 ) 每 一 个 元 素 ， 决 定 它 们 是 否 包含 在 最 终 的 结果 集中 。 在 这 里 ， 判 断 是 否 应 该 
包含 某 个 元 素 并 不 需要 元 素 本 身 的 信息 。 只 要 知道 它们 在 原始 结果 集中 的 位 置 即 可 。 这 个 位 置信 
息 就 是 通过 一 个 参数 传人 到 第 选 玖 数 中 的 ， 我 们 给 这 个 参数 起 名 为 index。 

好 了 ，index 参 数目 前 保存 的 是 每 个 元 素 从 0 开始 计数 的 位 置 。 有 了 这 个 数据 ， 就 可 以 使 用 
求 模 ( % ) 操作 符 来 确定 当前 的 两 个 元 素 是 否 需 要 添加 alt 类 。 这 样 就 可 以 实现 每 两 行 交 替 变换 
一 次 的 条 纹 效果 。 

不 过 ， 还 是 有 两 个 小 问题 需要 解决 。 因 为 没有 再 使 用 :nth-chila() 伪 类 ， 所 以 交替 效果 不 
会 在 每 个 <tbodqy> 元 素 中 分 别 开 始 。 同 时 ， 为 了 保证 外 观 的 一 致 ， 还 要 跳 过 表格 中 的 标题 行 。 这 
些 问题 只 要 修改 代码 中 的 两 个 地 方 就 可 以 解决 ， 如 代码 清单 9-6 所 示 。 


代码 清单 9-6 


$s(document) .ready (function() { 
$s('#news tbody').each(function() { 
s(this).children() .has('td').filter(function(index) { 
return (index % 4) < 2; 
}) .addClass('alt'); 
3 
os 


为 了 独立 地 处 理 每 一 组 表格 行 , 可 以 使 用 .each () 来 循环 遍历 每 一 个 <tbodqy> 元 素 。 在 循环 
内 部 ， 像 代码 清单 9-3 中 一 样 使 用 .has () 排除 子 标题 行 即 可 ,结果 如 图 9-4 所 示 。 

















Date Headline Author Topic 
2011 
Apr 15 jQuery 1.6 Beta 1 Released John Resig Releases 
Feb 24 jQuery Conference 2011; San Francisco Bay Area Ralph Conferences 
Whitbeck 
Feb7 New Releases, Videos & a Sneak Peek at the jQuery UI Grid Addy Osmani Plugins 
Jan31 jQuery 1.5 Released John Resig Releases 
Jan 30 API Documentation Changes Karl Swedberg Documentation 
Nov 23 Team Spotlight: The jQuery Bug Triage Team Paul Irish Community 
图 9-4 


9.1.3 ”组合 筛选 与 条 纹 


高 级 的 表格 条 纹 效 果 还 不 错 , 然而 只 要 一 按照 主题 来 筛选 ,奇怪 的 现象 就 出 来 了 。 为 了 让 这 
两 个 功能 可 以 完美 地 共存 , 必须 在 每 次 筛选 之 后 重新 应 用 条 纹 效果 。 此 外 , 在 应 用 alt 类 的 时 候 ， 
还 要 考虑 某 些 行当 前 是 否 隐 藏 了 。 代 码 清单 9-7 展 示 了 完整 的 代码 。 
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代码 清单 9-7 


$s(document) .ready (function() { 
function stripe() { 
$('#news').find('tr.alt') .removeClass('alt'); 
$s('#news tbody') .each (function() { 
s(this).children(':visible').has('tqd') 
.filter(function(index) { 
return (index % 4) < 2; 
}).addClass('alt'); 
} 
} 
stripe(); 
$('#topics a').click(function(event) { 
event .preventDefault(); 
Var topic = $(this).text(); 
$('#topics a.selected') .removeClass('selected'); 
$s (this) .addClass('selected'); 
$s('#news') .find('tr').show!(); 


tOBLE 1 ALI*Y { 
$s('#news').find('tr:has(td)') .not (function() { 
return $ (this) .children(':nth-child(4)') .text() == topic; 
}) .hide(); 


} 
stripe(); 
和 

和 


以 上 代码 整合 了 代码 清单 9-3 中 的 筛选 代码 和 刚才 的 条 纹 代 码 ， 而 且 定 义 了 一 个 名 为 
sttripe() 的 函数 。 文档 加 载 完毕 后 会 立即 调用 stzripe() 函数 , 每 次 单 击 主题 链接 时 也 会 调用 一 
次 该 函数 。 在 这 个 函数 中 ， 一 方面 删除 不 再 需要 的 alt 类 ， 另 一 方面 将 选择 的 行 限制 为 当前 可 见 
的 那些 行 。 这 里 用 到 的 伪 类 :visible (及 其 对 应 的 伪 类 :hiaden ) 非常 重要 ， 它 会 排除 由 于 各 
种 原因 隐藏 的 元 素 ， 包 括 aisplay 值 为 none 以 及 width 和 height 属 性 被 设置 为 0(。 图 9-5 展 示 了 
组 合 筛选 与 条 纹 之 后 的 效果 。 




















Topics: Al Community Documentation Plugins Releases Miscellaneous 
Date Headline Author Topic 
2011 
Feb 24 jQuery Conference 2011: San Francisco Bay Area Ralph Whitbeck Conferences 
Aug 24 jQuery Conference 2010: Boston Ralph Whitbeck Conferences 
Jun 14 Seattle jQuery Open Space and Hack Attack with John Resig Rey Bango Conferences 
Mar 15 jQuery Conference 2010: San Francisco Bay Area Mike Hostetler Conferences 
图 9-5 


9.1.4 更 多 选择 符 与 遍历 方 ; 


本 书 全 部 示例 加 在 一 块 ， 也 不 可 能 穷尽 使 用 jQuery 在 页 面 中 查找 元 素 的 所 有 方法 。 它 为 我 们 
提供 的 选择 符 和 和 DOM 遍历 方法 实在 太 丰 富 了 ， 每 一 种 都 可 以 在 适当 的 情况 下 派 上 用 场 。 
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泪 





为 了 找到 满足 需求 的 选择 符 和 方法 , 可 以 查阅 一 些 资源 。 本 书 末尾 的 快速 参考 中 列 出 了 每 一 
种 选择 符 和 方法 。 不 过 ,要 想 查 找 更 详细 的 介绍 ， 建 议 读者 参考 更 全 面 的 手册 。 这 里 有 所 有 选择 
符 的 介绍 : http://api.jquery.com/category/selectors/, 而 这 里 有 遍历 方法 的 介绍 : http://apijquery.com/ 
category/traversing/。 














9.2 ”定制 与 优化 选择 符 


将 我 们 看 到 的 那么 多 技术 放 到 一 起 ,就 像 是 配备 了 一 个 工具 箱 。 工 具 箱 中 的 工具 能 够 帮 我 们 
在 页 面 中 查找 想 要 操作 的 任何 元 素 。 但 我 们 要 了 解 的 还 不 止 这 些 。 怎么 才能 更 加 有 效 地 查找 元 素 
也 是 必须 关心 的 一 个 问题 。 所 谓 有 效 ， 可 能 会 反映 在 几 个 方面 。 比 如 代码 容易 读 、 容 易 写 ， 再 比 
如 代码 在 浏览 器 中 运行 的 速度 更 快 。 


9.2.1 编写 定制 的 选择 符 插件 


提高 代码 可 读 性 的 一 种 方式 是 把 代码 片段 封装 为 可 以 重用 的 组 件 。 我 们 之 所 以 创建 函数 就 是 
这 个 目的 。 第 8 章 刚刚 讨论 了 这 种 思想 的 延伸 , 那 就 是 以 创建 jQuery 插件 的 方式 为 jQuery 对 象 添加 
方法 。 不 过 ,插件 并 不 局 限于 为 jQuery 对 象 添 加 方法 ,还 可 以 让 我 们 自 定 义 选择 符 表达 式 ， 例 如 
第 7 章 介绍 的 Cycle 搬 件 中 的 :paused 选 择 符 。 

最 容易 添加 的 选择 符 是 伪 类 ， 也 就 是 以 冒号 开头 的 选择 符 表达 式 ， 比 如 :checkeda 
或 :nth-child()。 为 了 演示 创建 选择 符 表 达 式 的 过 程 ， 我 们 会 讨论 构建 一 个 名 为 :group () 
的 伪 类 。 这 个 新 选择 符 将 用 于 封装 代码 清单 9-6 中 的 那些 查找 表格 行 并 为 它们 添加 条 纹 效果 的 
代码 。 

在 使 用 选择 符 表 达 式 查找 元 素 的 时 候 ，jQuery 会 在 一 个 内 部 的 对 象 expr 中 取得 JavaScript 代 
码 。 这 个 对 象 中 的 值 与 我 们 传人 到 .filter() 或 .not() 中 的 筛选 函数 非常 相似 ， 当 且 仅 当 取 得 
的 函数 返回 true 的 情况 下 , 才 会 让 每 个 元 素 包 含 在 结果 集中 。 使 用 $. extena() 函数 可 以 为 这 个 
对 象 添 加 新 的 表达 式 ， 人 参见 代码 清单 9-8。 




















Ea 





















































代码 清单 9-8 
(function($) { 
S$.extend($.expr[':'], { 


group: function(element, index, matches, set) { 
Var num = parseInt (matches[3], 10); 
if (isNaN(num)) { 

return false; 

} 
return index %$ (num * 2) <num; 

} 

局 用 
}) (jQuery); 


以 上 代码 告诉 jQuery: group 是 一 个 有 效 的 字符 串 ， 可 以 放 在 一 个 冒号 的 后 面 构成 选择 符 表 
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达 式 。 而 在 遇 到 这 个 选择 符 表达 式 的 时 候 , 应 该 调用 给 定 的 函数 , 用 以 决定 相应 的 元 素 是 否 应 
包含 在 结果 集中 。 
这 个 被 求 值 的 函数 一 共 接 收 了 4 个 参数 。 
(1) element: 当前 考虑 的 DOM 元 素 。 这 个 参数 对 于 大 多 数 选择 符 都 是 必须 的 ， 但 我 们 这 
选择 符 则 不 需要 。 
(2) index: DOM 元 素 在 结果 集中 的 索引 。 
(3) matches: 包含 用 于 解析 这 个 选择 符 的 正则 表达 式 的 解析 结果 。 一 般 来 说 ， 
matches[3] 是 这 pe 个 数组 中 唯一 有 用 的 值 ; 假设 有 一 个 选择 符 的 形式 为 :group (b) ， 则 
matches [ 含 的 值 就 是 p， 也 就 是 括号 中 的 文本 。 
(4) set: ean 这 个 参数 很 少 用 
伪 类 选择 符 需 要 使 用 包含 在 这 4 个 参数 中 的 信息 ， 决 定 当 前 元 素 是 否 应 该 包含 在 结果 集中 。 
在 我 们 这 个 例子 中 ， 只 需要 index 和 matches 这 两 个 参数 。 

定义 了 :group 选 择 符 之 后 ， 就 有 了 交替 元 素 分 组 的 更 灵活 的 方式 。 比 如 ， 代 码 清单 9-5 中 的 
选择 符 表 达 式 与 .filter () 函数 可 以 组 合 为 一 个 选择 符 表 达 式 : $ ('#news tr:group(2)')。 
而 对 于 代码 清单 9-7 的 例子 ， 也 可 以 让 表格 中 的 每 一 部 分 行为 保持 一 致 ， 只 要 在 调用 .filter() 
函数 的 时 候 传 人 :group () 表达 式 即 可 。 甚 至 ， 只 要 向 其 圆 括 号 中 传人 不 同 的 数值 ， 就 可 以 改变 
每 一 组 的 行 数 ， 如 代码 清单 9-9 所 示 。 














代码 清单 9-9 
$s(document) .ready (function() { 
function stripe() { 


$('#news').find('tr.alt') .removeClass('alt'); 
$s('#news tbody') .each (function() { 
s(this).children(':visible').has('td') 
.filter(':group(3)').addCclass('alt'); 
有 
} 
stripe(); 
}) 


这 样 ， 就 可 以 得 到 如 图 9-6 所 示 的 三 行 一 组 的 条 纹 效果 。 

















Date Headline Author Topic 
2011 
Apr 15 jQuery 1.6 Beta 1 Released John Resig Releases 
Feb 24 jQuery Conference 2011: San Francisco Bay Area Ralph Conferences 
Whitbeck 
Feb7 New Releases, Videos & a Sneak Peek at the jQuery UI Grid Addy Osmani Plugins 
Jan 31 jQuery 1.5 Released John Resig Releases 
Jan 30 API Documentation Changes Karl Swedberg Documentation 
Nov 23 Team Spotlight: The jQuery Bug Triage Team Paul Irish Community 
图 9-6 
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9.2.2 选择 符 的 性 能 问题 





在 规划 任何 Web 项 目的 时 候 ， 都 需要 考虑 项 目 周期 、 维 护 代 码 的 难 易 程度 和 效率 ， 以 及 用 户 
使 用 网 站 过 程 中 的 性 能 等 问题 。 通常 ,前 两 个 问题 比 第 三 个 问题 更 重要 。 特别 是 对 客户 端 脚本 编 
程 来 说 ,开发 人 员 经 常 落 入 “过 早 优化 ”和 “微观 优化 ”的 陷阱 之 中 。 无 数 个 小 时 的 时 间 投 入 进 
去 , 换 来 的 往往 只 有 JavaScript 代 码 执行 过 程 中 毫秒 级 别 的 提升 , 这 种 提升 也 很 难 被 用 户 的 眼睛 觉 
察 到 。 






































开发 人 员 中 有 一 条 经 验 法 则 , 那 就 是 人 的 时 间 总 比 机 器 的 时 间 更 值钱 一 一 除 
一” 非 应 用 程序 确实 明显 反应 迟钝 。 





























即使 是 真 的 存在 性 能 问题 ， 在 jQuery 代码 中 查 出 瓶颈 所 在 也 是 非常 困难 的 。 正 如 本 章 开 头 
所 提醒 的 ， 有 些 选 择 符 相 对 会 更 快 一 些 。 因 此 ， 把 某 些 选择 符 替 换 成 遍历 方法 可 以 节省 查找 页 
面 元 素 的 时 间 。 换 句 话 说， 选择 符 及 遍历 的 性 能 问题 经 常 是 解决 用 户 感觉 网 页 反应 迟钝 的 一 个 
突破 口 。 









































针对 选择 符 和 遍历 速度 所 作 的 任何 决定 ， 都 有 可 能 伴随 着 更 新 更 快 的 浏览 

> 器 发 布 ， 或 者 jQuery 新 版 本 加 入 巧妙 的 速度 优化 而 变 得 毫 无 价值 。 为 了 真正 提升 

性 能 ， 最 好 反复 思考 自己 假定 的 条 件 ， 然 后 在 使 用 jsPerf ( http://jsperf.com/ ) 等 
工具 实际 测量 之 后 ， 再 动手 编写 优化 代码 。 


了 解 了 这 些 常 识 ， 接 下 来 我 们 就 介绍 两 个 简单 的 指导 方针 。 

1. Sizzle 的 选择 符 实 现 

本 章 一 开始 跟 大 家 提 到 过 , 在 把 一 个 选择 符 表达 式 传递 给 $ () 函数 时 ,jQuery 的 Sizzle 引 擎 会 
解析 这 个 表达 式 ， 并 确定 如 何 收集 该 表达 式 所 表示 的 元 素 。 在 最 本 质 的 层次 上 ，Sizzle 会 应 用 浏 
览 咒 支持 的 最 高 效 的 原生 DOM 方 法 取得 nodeList。 这 个 节点 列表 是 一 个 包 仿 DOM 元素 的 类 似 数组 
的 对 象 ，jQuery 最 终 会 将 这 个 对 象 转换 成 真正 的 数组 ， 并 将 其 添加 到 jQuery 对 象 中 。 下 面 就 是 
jQuery 内 部 使 用 的 几 个 DOM 方 法 ， 同 时 给 出 了 支持 它们 的 浏览 器 及 版 本 。 









































方 法 选择 目标 支持 的 浏览 器 
.getElementById() 取得 ID 与 给 定 的 字符 串 匹 配 的 一 个 元 素 全 部 
.getElementsByTagName () 取得 标签 名 与 给 定 的 字符 串 匹 配 的 所 有 元 素 全 部 

-二 IE 9+\ Firefox 3+、Safari 4+、 
ff 1 得 某 个 类 名 与 给 定 的 字符 串 匹 配 汞 元 素 
getElementsByClassName () 取得 某 个 类 名 与 给 定 的 字符 配 的 所 有 元 素 Chrome 4+ 和 Opera 10+ 

、 有 二 IE 8+、Firefox 3.5+、Safari 
.aueryselectorall10) 取得 与 给 定 的 选择 符 表达 式 匹 配 的 所 有 元 素 本 二 网 


3+、Chrome 4+ 和 Opera 10+ 
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在 这 些 方法 都 不 能 处 理 某 个 选择 符 表 达 式 的 情况 下 ，Sizzle 会 退 而 求 其 次 地 循环 遍历 已 经 收 
集 到 的 所 有 元 素 ， 并 根据 这 个 表达 式 来 测试 每 一 个 元 素 。 具 体 来 说 ， 假 如 没有 现成 的 DOM 方 法 
可 以 拿 来 处 理 这 个 选择 符 表 达 式 ，Sizzle 就 会 使 用 document .getElementsByTagName ('*') 来 
取得 文档 中 的 全 部 元 素 ， 然 后 再 遍历 并 测试 每 个 元 素 。 

与 使 用 任何 一 个 原生 DOM 方 法 相 比 ， 这 种 遍历 和 测试 每 个 元 素 的 方法 十 分 影响 性 能 。 好 就 
好 在 ， 所 有 现代 浏览 器 的 最 新 版 本 都 开始 原生 支持 .querySselectoraAll() 方 法 了 ， 此 时 Sizzle 
就 会 在 其 他 ( 也许 更 快 的 ) 原生 方法 不 可 用 的 情况 下 使 用 这 个 方法 。 但 也 有 一 个 例外 : 如 果 选 择 
符 表达 式 中 包含 自 定 义 的 jQuery 选择 符 (例如 :ea() 、:oddq 或 :even )， 而 这 些 选 择 符 并 没有 对 
应 的 CSS 版 本 ， 那 Sizzle 也 别 无 选择 ， 只 能 循环 加 测试 了 。 

2. 测试 选择 符 的 速度 

为 了 让 大 家 对 使 用 .queryselectorall() 方 法 和 使 用 循环 加 测试 的 方法 的 性 能 差异 有 个 
直观 的 了 解 ， 我 们 假设 想 要 找到 一 个 文档 中 的 所 有 <input type="text"> 元 素 。 为 此 ， 可 以 使 
用 两 种 选择 符 表 达 式 ， 一 种 是 CSS 属 性 选择 符 $(' input [type="text"]')， 男 一 种 jQuery 自 定 
义 选择 符 $ ('input :text')。 为 测试 选择 符 中 我 们 关注 的 部 分 ， 我们 要 去 掉 其 中 的 input ， 只 
比较 $ (' [type="text"]') 和 $ (':text') 的 速度 ,使 用 这 两 种 表达 式 在 JavaScript 基 准 测 试 网 站 
http://jsperf.com/ 中 进行 测试 ， 结 果 相 当 有 戏剧 性 。 

在 jsPerf 测 试 中 ， 每 个 测试 用 例 都 会 被 反复 循环 ， 从 而 得 到 指定 的 时 间 内 能 够 完成 多 少 次 循 
环 。 因 此 , 结果 数字 越 大 , 说 明 速 度 越 快 。 用 来 测试 的 现代 浏览 器 ( Chrome 26、Firefox 20 和 Safari 
6 ) 由 于 支持 选择 符 可 以 利用 的 .querySelectorAll () 方 法 , 平均 速度 比 使 用 jQuery 自 定义 选择 
符 快 得 多 ， 如 图 9-7 所 示 。 
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图 9-7 


然而 ， 在 不 支持 .querySelectoraAll() 的 浏览 器 ( 如 IE7 ) 中 ， 这 两 个 选择 符 的 速度 几乎 相 
同 。 因 为 这 时 候 两 个 选择 符 都 会 强迫 jQuery 遍历 页 面 中 的 每 一 个 元 素 , 并 逐个 进行 测试 ,如 图 9-8。 





图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 





198 第 9 章 高 级 选择 符 与 遍历 








120 Browser that 
does NOT support 


.querySelectorAll() 
100 


mS('[type="text"]') 
s(text') 


40 














图 9-8 


图 9-9 展 示 的 是 测试 s('input:ea(1)') 和 $('input') .ea(1) 这 两 个 选择 符 的 结果 ,可 以 
看 到 支持 原生 方法 和 不 支持 原生 方法 的 浏览 器 性 能 差异 更 大 。 
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图 9-9 


虽然 浏览 器 每 秒 的 运算 次 数 不 一 样 ， 但 把 自 定 义 的 :es() 选 择 符 挪 到 外 面 来 变 成 .ea () 方 
法 ， 速 度 提 升 也 是 相当 明显 的 。 对 于 这 个 例子 来 说 ， 使 用 简单 的 input 标 签名 作为 $ () 函数 的 参 
数 ， 可 以 让 查找 的 速度 提高 很 多 。 而 .eq() 方 法 也 只 不 过 是 调用 一 个 数组 处 理 函 数 ， 从 jQuery 集 
合 中 取得 第 二 个 元 素 黑 了 。 

告诉 大 家 一 条 通用 的 经 验 法 则 : 要 尽 可 能 使 用 CSS 规 范 中 规定 的 选择 符 ， 除 非 没 有 可 使 用 
jQuery 的 自 定 义 选择 符 。 同 样 ， 在 修改 选择 符 之 前 ， 也 要 记 住 只 在 确实 有 必要 提升 性 能 的 情况 下 
再 去 提升 。 至 于 测量 修改 选择 符 之 后 的 性 能 提升 了 多 少 , 可 以 使 用 类 似 http://jsperf.cony 所 提供 的 
基准 测试 工具 。 
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9.3 DOM 遍历 背后 的 秘密 


第 2 章 以 及 本 章 一 开始 的 时 候 ,我 们 都 探讨 过 通过 调用 DOM 遍 历 方法 从 一 组 DOM 元 素 转移 到 
另 一 组 DOM 元 素 的 不 同方 式 。 对 这 些 方法 ( 远 远 没 有 穷尽 ) 的 探讨 包括 像 .next () 和 .parent () 
这 样 移 动 到 相 邻 位 置 的 简单 方式 ,也 涉及 了 像 .finda() 和 .filter() 这 样 组 合 选择 符 表 达 式 的 复 
杂 手 段 。 总 之 ， 现 在 我 们 应 该 已 经 具备 了 坚实 的 基础 ， 至 少 知道 通过 某 些 方式 可 以 从 一 个 DOM 
元 素 转移 到 另 一 个 DOM 元 素 。 

不 过 ， 每 当 我 们 从 一 个 (组) DOM 元 素 转 移 到 另 一 个 (组 ) DOM 元 素 时 ，jQuery 都 会 留意 
我 们 移动 的 路 线 并 留 下 “面包 居 ”， 以 便 我 们 在 必要 时 能 够 找到 “ 回 家 ”的 路 。 第 2? 章 曾 简要 提 到 
过 的 两 个 方法 .end() 和 .adgBack() 就 利用 了 这 个 记录 。 为 了 最 大 限度 地 利用 这 些 方法 , 同时 写 
出 一 般 意义 上 的 高 效 的 jQuery 代码 ， 我 们 必须 深入 理解 DOM 人 遍历 方法 的 运作 机 制 。 












































9.3.1 jQuery 对 象 属性 


众所周知 ， 要 得 到 一 个 jQuery 对 象 的 实例 ， 需 要 向 $ () 函数 传人 一 个 选择 符 表达 式 。 而 得 到 
的 对 象 是 一 个 数组 结构 ， 其 中 包含 着 与 该 选择 符 匹 配 的 每 个 DOM 元 素 的 引用 。 可 是 我 们 并 不 知 
道 的 是 ， 这 个 对 象 中 还 隐藏 着 其 他 一 些 属性 。 比 如 . context 属性 中 包含 着 一 个 DOM 节 点 (通常 
是 aocument ) 的 引用 ， 搜 索 就 是 从 这 个 节点 开始 的 ; 比如 .selector 属 性 中 保存 着 创建 最 终 对 
象 的 选择 符 表达 式 。 在 调用 .on () 等 事件 委托 方法 时 ， 这 两 个 属性 就 会 派 上 用 场 。( 事件 委托 将 
在 第 10 章 中 讨论 。) 不 过 ,在 调用 某 个 DOM 痪 历 方法 时 ， 则 会 用 上 第 三 个 属性 : .prevobject。 
这 个 属性 中 保存 着 调用 遍历 方法 的 那个 jQuery 对 象 。 

为 了 让 这 些 属 性 露 一 露面 , 可 以 突出 显示 表格 中 的 任意 一 个 单元 格 , 然后 把 这 些 属 性 都 “请 ” 
出 来 ， 参 见 代 码 清单 9-10。 


代码 清单 9-10 


s(dqocument) .ready (function() { 
Var Scell = $('#release'); 
scell.addClass('highlight'); 
console.log($cell.context); 
console.log($cell.selector); 
console.log($cell.prevOobject); 
}) 3 


这 个 代码 片段 突出 显示 了 一 个 选中 的 单元 格 ， 如 图 9-10 所 示 。 
浏览 器 控制 台中 也 会 显示 三 条 记录 ， 如 下 表 所 示 。 
























































表 达 式 记录 的 值 
$cell.context Document 
$cell.selector #release 
scell.prevOobject undefined 
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Apr 15 jQuery 1.6 Beta 1 Released John Resig Releases 

Feb 24 jQuery Conference 2011: San Francisco Bay Area Ralph Conferences 
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Feb7 New Releases, Videos& a Sneak Peek at the jQuery UI Grid Addy Osmani Plugins 

Jan31 jQuery 1.5 Released John Resig Releases 

Jan 30 API Documentation Changes Karl Swedberg Documentation 








图 9-10 











可 以 看 到 ，.context 属 性 中 保存 着 Document 对 象 ，.selector 属 性 中 保存 着 我 们 传人 的 字 
符 串 ， 而 .prevobject 属 性 未 定义 一 一 因为 这 是 一 个 刚刚 创建 的 对 象 ， 还 没有 之 前 的 调用 对 象 。 
好 ， 下 面 我 们 再 向 代码 中 添加 一 个 遍历 方法 ， 然 后 结果 就 会 有 所 变化 了 ， 如 代码 清单 9-11 所 示 。 


代码 清单 9-11 


$s(document) .ready (function() { 
Var S$cell = $('#release') .nextAll(); 
scell.addClass('highlight'); 
console.log($cell.context); 
console.log(s$cell.selector); 
console.log(s$cell.prevOobject); 

二 


这 个 修改 导致 突出 显示 的 单元 格 发 生变 化 ， 如 图 9-11 所 示 。 

















Date Headline Author Topic 

2011 

Apr 15 jQuery 1.6 Beta 1 Released John Resig Releases 

Feb 24 jQuery Conference 2011: San Francisco Bay Area Ralph Conferences 

Whitbeck 

Feb7 New Releases, Videos & a Sneak Peek at the jQuery UI Grid Addy Osmani Plugins 

Jan 31 jQuery 1.5 Released John Resig Releases 

Jan 30 API Documentation Changes Karl Swedberg Documentation 
图 9-11 


而 加 入 对 .nextAl1 () 的 调用 之 后 ， 日 志 中 的 消息 也 相应 发 生 了 变化 。 





表 达 式 记录 的 值 
$cell.context Document 
$cell.selector #release.nextAll () 
$scell.prevOobject [十 阳 ] 





这 一 次 ， 位 于 我 们 最 初 选中 的 单元 格 后 面 的 两 个 单元 格 突出 显示 了 。 而 在 jQuery 对 象 
中 ，.context 属性 仍然 保存 着 Document 对 象 ，.selector 属 性 的 值 被 修改 后 反映 了 
对 .nextAl1 () 的 调用 ,而 .prevobject 属 性 中 则 保存 着 调用 .nextAl1 () 之 前 的 那个 jQuery 对 
象 实例 的 引用 。 
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9.3.2 DOM 元 素 栈 





每 个 jQuery 对 象 都 有 一 个 .prevobject 属 性 指向 前 一 个 对 象 。 这 样 , 就 有 了 一 个 实现 了 栈 的 
列表 结构 。 每 个 遍历 方法 都 会 找到 一 组 新 元 素 , 然后 把 这 组 元 素 压 入 到 栈 中 。 这 个 栈 只 有 我 们 需 
要 它 的 时 候 才 有 用 ， 而 .enda() 和 .addBack() 方 法 就 是 用 来 操作 这 个 栈 的 。 

首先 来 看 .ena() 方 法 ， 这 个 方法 只 是 简单 地 从 栈 中 弹出 一 个 元 素 ， 结 果 就 是 栈 的 最 上 方 保 
存 着 与 .prevobject 属 性 中 相同 的 引用 。 第 2 章 曾 介绍 过 一 个 使 用 .ena () 方 法 的 例子 ， 稍 后 也 
会 再 作 介绍 。 不 过 ， 要 说 有 意思 ， 还 是 .addqBack () 方 法 操作 栈 的 方式 比较 有 意思 的 ， 参 见 代 码 
清单 9-12。 








代码 清单 9-12 


s(dqocument) .ready (function() { 


$('#release') .nextAl1() .addBack() .addClass ('highlight'); 
) 


这 一 次 ， 突 出 显示 的 单元 格 又 不 一 样 了 ， 如 图 9-12 所 示 。 


_ 
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Jan 30 API Documentation Changes Karl Swedberg Documentation 
图 9-12 


调用 .adaBack() 时 ,jQuery 会 在 栈 中 回溯 一 个 位 置 ， 把 两 个 位 置 上 的 元 素 集 组 合 起 来 。 具 
体 到 这 个 例子 来 说 ， 这 意味 着 被 突出 显示 的 不 仅 会 包括 .nextall() 找 到 的 那 两 个 单元 格 ， 而 且 
还 会 包括 最 初 通过 ID 选择 符 找 到 的 那个 单元 格 。 然 后 ,这 个 新 的 、 组 合 之 后 的 元 素 集 就 会 被 压 人 
栈 的 上 方 。 

毫 无 疑问 ,可 以 对 这 个 栈 进行 操作 ,绝对 会 带 来 很 多 便利 。 为 确保 这 个 技术 在 必要 时 可 以 派 
得 上 用 场 , 就 必须 让 每 一 个 遍历 方法 都 正确 无 误 地 更 新 这 个 栈 。 这 就 意味 着 假如 我 们 想 提 供 自 己 
的 遍历 方法 ， 那 就 得 理解 系统 内 部 的 某 些 工 作 机 制 。 





9.3.3 编写 DOM 遍 历 方法 插件 


与 其 他 的 jQuery 对 象 方法 类 似 , 也 可 以 通过 为 $. fn 添加 属性 的 方式 来 向 jQuery 中 添加 遍历 方 
法 。 第 8 章 曾 介绍 过 , 新 添加 的 jQuery 方法 应 该 在 操作 匹配 的 元 素 集 之 后 返回 jQuery 对 象 ， 以 便 用 
户 可 以 再 连 级 其 他 方法 。 在 创建 POM 遍历 方法 时 , 这 个 过 程 也 是 类 似 的 , 但 是 返回 的 jQuery 对 象 
必须 要 指向 一 个 新 匹配 的 元 素 集 。 
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举 个 例子 会 更 清楚 。 比 如 我 们 要 编写 一 个 插件 , 用 来 找到 与 给 定单 元 格 在 同一 列 中 的 所 有 单 
元 格 , 那么 可 以 用 代码 清单 9-13 中 的 代码 实现 这 个 插件 。 先 来 看 一 看 完整 的 代码 ， 随 后 我 们 再 逐 
步 分 析 每 一 行 代码 的 作用 ， 参 见 代码 清单 9-13。 


代码 清单 9-13 


(function($) { 
$s.fn.column = function() { 
var Scells = $(); 
this.each(function() { 
Var S$td = $(this) .closest('tqd, th'); 
if (S$td.length) { 
Var colNum = S$td[0] .cellIindex + 1; 
Var $columnCells = $tqd 
.Closest('table') 
find('ta, th") 
.filter(':nth-child(' + colNum + ')'); 
scells = S$cells.add($columnCells); 
} 
学 
return this.pushStack(Scel1s) ; 
5 
}) (jQuery); 


这 个 新 定义 的 .column () 方 法 可 以 在 指向 0 个 、1 个 或 更 多 DOM 元 素 的 jQuery 对 象 上 调用 。 
考虑 到 各 种 可 能 性 , 我 们 使 用 了 .each ( ) 方 法 来 遍历 所 有 元 素 , 逐个 把 单元 格 所 在 的 列 添加 到 变 
量 $cells 中 。 这 个 scells 变 量 一 开始 保存 着 一 个 空 的 jQuery 对 象 ， 但 随后 使 用 jQuery 的 .aaa() 
方法 扩展 到 指向 越 来 越 多 的 DOM 元 素 。 

这 是 函数 的 外 层 循环 。 在 内 部 循环 中 ， 需 要 理解 的 是 把 表格 列 中 的 哪些 DOM 元 素 填充 到 了 
变量 scolumncells 中 。 首 先 ， 取 得 作为 搜索 起 点 的 单元 格 的 引用 。 我 们 想 让 这 个 .column () 
方法 在 单元 格 上 ， 或 者 在 单元 格 包含 的 元 素 上 都 可 以 调用 ， 而 .closest () 方 法 恰好 符合 我 们 需 
要 ; 这 个 方法 会 向 上 遍历 并 检测 DOM 树 ( 包括 调用 对 象 自 身 )， 直 至 找到 与 选择 符 匹 配 的 一 个 元 
素 。 后 面 第 10 章 还 会 再 次 讨论 这 个 方法 ， 在 实现 事件 委托 的 时 候 它 是 非常 有 用 的 。 

在 取得 了 单元 格 后 , 我 们 通过 DOM 的 .cellIndex 属 性 找到 它 所 在 的 列 序号 。 因 为 这 个 序号 
是 从 0 开始 计算 的 ， 而 我 们 后 面 要 使 用 从 1 开始 计算 的 伪 类 选择 符 ， 所 以 这 里 给 它 加 上 1。 然 后 ， 
从 这 个 单元 格 开始 ， 向 上 遍历 到 最 近 的 <table> 元 素 ， 再 返回 来 查找 表格 中 包含 的 <td> 和 <th> 
元 素 。 接 着 , 用 :nth-child() 选 择 符 表 达 式 来 对 找到 的 这 些 元 素 进行 筛选 。 



















































































处 理 主 套 的 表格 
> 我 们 这 里 写 的 这 个 插件 比较 简单 ,从 .find('tqd,th') 可 以 看 出 没有 考虑 到 
QQ 表格 庶 套 。 为 了 支持 表格 说 套 ， 需 要 确定 是 否 存 在 <tbody> 标 签 ， 并 在 DOM 树 


中 上 下 移动 适当 的 位 置 ， 而 这 就 会 给 我 们 这 个 例子 带 来 不 必要 的 复杂 性 。 


在 找到 一 列 或 多 列 中 的 所 有 单元 格 之 后 ,需要 返回 这 个 新 jQuery 对 象 。 假 如 我 们 只 是 简单 地 
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让 方法 返回 scells， 那 么 就 会 摘 乱 DOM 元 素 栈 。 因 此 ， 这 里 我 们 调用 .pushstack () 方 法 并 传 
人 $cells， 然 后 再 返回 结果 。.pushStack() 方 法 接收 一 批 DOM 元 素 ， 并 将 它们 添加 到 栈 中 ， 
以 便 接 下 来 对 .addBack () 和 .end() 的 调用 能 够 准确 无 误 地 执行 。 

下 面 来 看 一 看 这 个 插件 的 用 法 。 如 果 想 单 击 某 个 单元 格 就 突出 显示 相应 的 列 , 可 以 使 用 代码 
清单 9-14 中 的 代码 。 


代码 清单 9-14 


$s(document) .ready (function() { 
$s('#news td') .click(function() { 
$('#news td.active').removeClass('active'); 
$s (this) .column() .addClass('active'); 
地 
})3 


把 active 类 添加 到 选中 的 列 之 后 , 会 看 到 该 列 的 颜色 变化 。 比 如 ， 图 913 显 示 就 是 单 击 了 作 
者 名 字 后 ， 作 者 列 突出 显示 的 效果 。 




















Headline Author 
Apr 15 jQuery 1.6 Beta 1 Released John Resig Releases 
Feb 24 jQuery Conference 2011: San Francisco Bay Area Ralph Conferences 
Whitbeck 
Feb7 New Releases, Videos & a Sneak Peek at the jQuery UI Grid Addy Osmani Plugins 
Jan31 jQuery 1.5 Released John Resig Releases 
Jan 30 API Documentation Changes Karl Swedberg Documentation 
图 9-13 





9.3.4 ”DOM 遍历 的 性 能 问题 


有 关 选 择 符 性 能 的 经 验 规则 也 完全 适用 于 DOM 遍 历 的 性 能 问题 :无 论 什么 时 候 ， 都 应 该 把 9 
简化 代码 的 编写 和 维护 工作 放 在 首位 。 只 有 在 性 能 确 确实 实 是 一 个 可 以 感知 的 问题 时 ， 再 考虑 
辆 牧 可 读 性 来 优化 代码 执行 速度 。 同 样 ， 像 http://isperf.com/ 这 样 的 网 站 能 帮助 你 测试 哪 种 方法 最 
合适 。 

虽然 应 该 避免 过 早 优化 , 但 最 低 限度 地 重复 选择 符 和 遍历 方法 则 始终 是 值得 提倡 的 。 因 为 这 
此 操作 都 可 能 会 耗费 较 多 时 间 ， 用 得 越 少 越 好 。 而 要 避免 重复 ， 有 两 个 策略 值得 讨论 ， 那 就 是 连 
缀 和 缓存 对 象 。 

1. 使 用 连 缀 来 改进 性 能 

我 们 多 次 使 用 了 连 级 , 它 能 够 让 代码 更 简洁 。 
而 关键 则 是 利用 它 来 减少 重复 。 

代码 清单 9-9 中 的 stripe () 函数 就 两 次 使 用 了 ID 选 择 符 #news 查 找 元 素 : 一 次 是 为 了 从 带 有 
alt 类 的 行 中 删除 该 类 ， 另 一 次 是 为 了 给 新 选中 的 行 添加 这 个 类 。 如 代码 清单 9-15 所 示 ， 使 用 连 
级 可 以 把 两 次 操作 合 二 为 一 ， 避 免 重复 查找 。 

















山 忆 





有 实 上 , 使 用 连 级 还 有 可 能 带 来 性 能 上 的 提升 ， 
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代码 清单 9-15 


s$(dqocument) .ready (function() { 
function stripe() { 
$('#news') 
.find('tr.alt') .removeClass('alt') .end() 
.find('tbody') .each(function() { 
s(this) .children(':visible') .has('tqd') 
.filter( oroup(3)") .addclass ("alt”)’; 

} 

} 

stripe(); 


}); 

为 了 合并 对 $ ('#news' ) 的 两 次 调用 ， 这 里 又 控 握 了 jQuery 对 象 中 DOM 元 素 栈 的 潜力 。 第 一 
次 调用 .find() 会 把 表格 行 压 人 栈 中 ， 而 然后 的 .ena () 方 法 则 把 这 些 行 弹出 ， 从 而 让 下 一 次 调 
用 .fing() 仍 然 是 在 #news 表 格 上 执行 操作 。 类 似 这 种 巧妙 地 利用 栈 的 技术 ,可 以 有 效 地 避免 重 
复 使 用 选择 符 。 

2. 使 用 缓存 来 改进 性 能 

所 谓 缓存 , 在 这 里 就 是 把 之 前 操作 的 结果 保存 起 来 , 以 便 将 来 不 必 再 运行 相同 的 操作 就 能 
用 它们 。 考 虑 到 使 用 选择 符 和 遍历 方法 的 性 能 问题 ， 缓 存 的 目标 可 以 确定 为 把 jQuery 对 象 保存 在 
一 个 变量 中 ， 以 便 将 来 使 用 时 不 再 重新 创建 同样 的 对 象 。 
再 回 到 例子 中 。 我 们 可 以 重 写 stripe () 函数 ， 这 次 使 用 缓存 而 不 是 连 级 ， 同 样 也 可 以 避免 
重复 使 用 选择 符 ， 如 代码 清单 9-16 所 示 。 


代码 清单 9-16 
$(dqocument) .ready (function() { 
Var Snews = $('#news'); 
function stripe() { 
$news.find('tr.alt') .removeClass('alt'); 
$news.find('tbody') .each (function() { 
s(this).children(':visible') .has('td') 
.filter(':group(3)').addClass('alt'); 
站 
} 
stripe(); 
站 站 有 
这 一 次 ， 两 个 操作 又 写成 了 不 同 的 JavaScript 语 句 ， 没 有 像 刚 才 那 样 连 绥 在 一 起 。 然 而 , 通过 
把 查询 tnews 的 结果 保存 在 变量 中 , 仍然 只 执行 了 一 次 $('#news ' ) 选择 符 。 与 连 级 的 方法 相 比 ， 
缓存 方式 稍 嫌 宛 长 ， 因 为 额外 创建 了 一 个 用 于 保存 jQuery 对 象 的 变量 。 但 从 另 一 个 角度 来 看 ， 这 
种 方式 在 代码 中 可 以 完全 分 离 选中 元 素 的 两 次 操作 ， 而 这 也 许可 以 满足 我 们 其 他 情况 下 的 需求 。 
同样 ， 因 为 可 以 把 选中 的 元 素 保存 在 stripe () 函数 之 外 ， 也 就 避免 了 每 次 调用 函数 时 重复 查询 
选择 符 的 操作 。 
因为 根据 ID 在 页 面 中 选择 元 素 速度 极 快 ， 这 两 个 例子 不 会 有 明显 的 性 能 差异 。 因 此 , 在 实际 
编码 中 ， 应 该 选择 可 读 性 最 好 、 最 容易 维护 的 方式 。 不 过 别 忘 了 ， 在 性 能 真正 出 现 瓶 颈 的 时 候 ， 
这 些 技术 都 可 以 起 到 立竿见影 的 效果 。 
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9.4 小 结 


本 章 比较 深入 地 探讨 了 jQuery 在 文档 中 查找 元 素 的 种 种 方法 ， 剖 析 了 Sizzle 选 择 符 引 擎 内 部 
的 工作 机 制 , 以 及 理解 其 工作 原理 对 于 设计 高 效 代码 的 重要 意义 。 此 外 , 我 们 还 讨论 了 扩展 jQuery 
选择 符 及 DOM 遍 历 方法 的 一 些 方式 。 
延伸 阅读 


要 了 解 有 关 选 择 符 与 遍历 方法 的 完整 介绍 , 请 参考 本 书 附录 C, 也 可 以 参考 jQuery 官方 文档 : 
http://api.jquery.com/。 





9.5 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
“挑战 ”练习 有 一 些 难度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : 
http://api.jquery.com/。 
(1) 修改 为 表格 行 添加 条 纹 效果 的 例子 , 第 一 行 不 添加 任何 类 、 第 二 行 添加 alt 类 、 第 三 行 添 
加 alt-2 类 。 在 每 个 子 区 域 中 以 三 个 表格 行为 一 组 应 用 上 述 模式 。 
(2) 创建 一 个 新 的 选择 符 插件 :containsExactly () ， 用 于 选择 包含 的 文本 与 传人 括号 中 的 
文本 完全 相同 的 元 素 。 
(3) 使 用 新 的 :containsExactly() 选 择 符 重 写 代 码 清单 9-3 中 的 筛选 代码 。 
(4) 创建 一 个 新 的 DOM 遍 历 插 件 .grandparent () , 可 以 在 DOM 中 移动 到 一 个 或 一 组 元 素 的 
祖父 元 素 。 
(5) 挑战 : 使 用 http:Vjsperfcom/， 把 index.html 的 内 容 粘贴 进去 ， 比 较 一 下 使 用 下 列 方式 查找 
与 <td idq="release"> 最 接近 的 祖先 表格 元 素 的 性 能 : 
口 使 用 . closest () 方 法 ; 
口 使 用 .parents () 方 法 ， 将 结果 限制 为 找到 的 第 一 个 表格 。 
(6) 挑战 : 使 用 http:Wjsperfcom/， 把 index.html 的 内 容 粘 贴 进 去 ， 比 较 一 下 使 用 下 列 方式 查找 
表格 中 每 一 行 的 最 后 一 个 <td> 元 素 的 性 能 : 
口 使 用 :1ast-child 伪 类 ; 
口 使 用 :nth-child() 伪 类 ; 
口 在 每 一 行 中 (使 用 .each() 方 法 遍历 每 一 行 ) 使 用 .1ast () 方 法 ; 
口 在 每 一 行 中 (使 用 .each() 方 法 遍历 每 一 行 ) 使 用 : last () 伪 类 。 
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要 在 应 用 程序 中 实现 交互 性 , 必须 时 刻 关注 用 户 的 一 举 一 动 并 对 他 们 的 操作 给 出 响应 ,通过 
前 面 的 学 习 ， 我 们 知道 jQuery 的 事件 系统 可 以 帮 我 们 解决 这 个 问题 。 

第 3 章 已 经 讨论 过 不 少 jQuery 提供 的 与 处 理事 件 有 关 的 特性 了 。 作 为 高 级 内 容 的 本 章 ， 将 讨 
论 如 下 主题 : 
口 事件 委托 及 其 带 来 的 挑战 ; 
口 与 某 些 事件 相伴 而 生 的 性 能 缺陷 ， 以 及 如 何 克 服 它们 ; 
口 自 定 义 事件 ; 
D jQuery 内 部 使 用 的 特殊 事件 系统 。 


10.1 再 谈 事件 


先 来 介绍 一 下 我 们 的 示例 文档 , 这 个 文档 最 终 将 成 为 一 个 简单 的 影集 。 影 集中 会 显示 一 组 昭 
片 , 单 击 链接 则 会 显示 更 多 照片 。 当 用 户 把 光标 移动 到 每 一 张 照 片上 面 时 ,会 显示 该 照片 的 文本 
简介 ， 这 个 功能 是 使 用 jQuery 的 事件 系统 实现 的 。 影 集 的 HTML 代 码 如 下 : 


<div id="container"> 
<hil>Photo Gallery</h1> 

















<div id="gallery"> 
<div class="photo"> 
<img src="photos/skyemonroe.jpg"> 
<div class="details"> 
<div class="description">The Cuillin Mountains, 
Isle of Skye, Scotland.</div> 
<div class="date">12/24/2000</div> 
<div class="photographer">Alasdair Dougall</div> 
</div> 
</div> 
<div class="photo"> 
<img src="photos/dscn1328.jpg"> 
<div class="details"> 
<div class="description">Mt. Ruapehu in summer</div> 
<div class="date">01/13/2005</div> 
<div class="photographer">Andrew McMillan</div> 


网 
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</div> 
</div> 
<div class="photo"> 
<img src="photos/024.JPG"> 
<div class="details"> 
<div class="description">midday sun</div> 
<div class="date">04/26/2011</div> 
<div class="photographer">Jaycee Barratt</div> 


</div> 
</div> 
<!-- 此 处 省 略 了 部 分 代码 --> 
</div> 
<a id="more-photos" href="pages/1.html">More Photos</a> 
</div> 
下 载 示例 代码 
yl 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 
Q 档 的 一 个 片段 。 如 果 读者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完整 的 示例 


代码 : Packt Publishing 网 站 http:/www.packtpub.com/support ， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


在 为 文档 中 的 照片 应 用 样式 , 将 它们 一 行 三 个 地 排列 整齐 之 后 ， 这 个 影集 的 外 观 就 如 图 10-1 
所 示 。 

















More Photos 











图 10-1 


图 灵 社 区 会 员 吉 


舟 (hezelwong@gmail.com) 专 享 尊重 版 权 





208 第 10 章 高 级 事件 处 理 
10.1.1 追加 数据 页 面 

















好 了 ,现在 我 们 想来 实现 一 个 常见 的 任务 , 那 就 是 让 浏览 器 响应 对 某 个 页 面 元 素 的 单 击 。 在 
单 击 More Photos 链 接 时 ， 需 要 执行 一 次 Ajax 请 求 ， 加 载 下 一 组 照片 并 将 它们 追加 到 <aiv 
id="gallery">， 参 见 代 码 清单 10-1。 
代码 清单 10-1 

$s(document) .ready (function() { 


Var pageNum = 1; 
$('#more-photos') .click(function(event) { 


四 澳 : 


event .preventDefault(); 
var Slink = S(this)s 
Var url = $link.attr('href'); 
E(w) 
$s.get (url, function(data) { 
$('#gallery') .append (data); 


a 
pageNum++; 
if (pageNum < 20) { 
$slink.attr('href', 'pages/' + pageNum + '.html'); 
} 
else { 


$link.remove(); 


此 外 ， 还 要 更 新 More Photos 链 接 的 目标 ， 让 它 指向 包含 下 一 组 照片 的 页 面 。 
代码 清单 10-2 


$s (document) .ready (function() { 
var pageNum = 1; 
$('#more-photos') .click(function(event) { 


event .preventDefault(); 
var STiInk = S(this);s 
Var url = $link.attr('href'); 
让 EE (EL 
$s.get (url, function(data) { 
$('#gallery') .append (data); 
}) 3 
pageNum++; 
if (PageNum < 20) { 
$link.attr('href', 'pages/' + pageNum + '.html'); 
} 
else { 
$link.remove(); 
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在 .click() 处 理 程序 中 ,我 们 使 用 变量 pageNum 来 跟踪 要 请 求 的 下 一 个 照片 页 面 ， 使 用 这 
个 数字 来 为 链接 构建 新 的 href 属 性 。 因 为 pageNum 是 在 函数 外 部 定义 的 ， 因 此 它 的 值 可 以 在 两 
次 点 击 的 过 程 中 得 以 保持 。 在 到 达 最 后 一 页 时 ， 就 删除 这 个 链接 。 





渐进 增强 
这 个 示例 可 以 离线 使 用 ， 不 需要 Web 服 务 器 。 在 实际 应 用 当中 ， 相 关 数 据 可 
能 会 保存 在 一 个 数据 库 里 。 服 务 器 端 代码 在 接收 到 浏览 器 对 一 组 照片 的 正常 请 
求 时 ， 会 返回 一 个 完整 的 HTML 页 面 ， 在 接收 到 Ajax 请 求 时 ， 则 只 返回 包含 相应 
> 照片 标记 的 HTML 片 段 。 这 样 ， 无 论 客户 端 是 否 支持 JavaScript， 用 户 都 能 正常 
Q 地 看 到 照片 。 
此 外 ， 还 需要 考虑 使 用 HTMLS 的 历史 记录 API， 让 用 户 能 够 把 我 们 用 Ajax 
加 载 的 内 容 保 存 为 书签 。 关 于 这 个 API 的 详细 信息 ， 请 参考 Dive into HTMLS 中 的 
文章 ( http://diveintohtml5.info/history.html ), 而 使 用 History 插 件 ( https://github.com/ 
browserstate/history.js ) 实现 这 个 功能 也 相当 简单 。 


10.1.2” 悬 停 时 显示 数据 


接 下 来 我 们 要 实现 的 功能 , 就 是 在 用 户 鼠 标 移 动 到 照片 上 的 时 候 显示 照片 的 详细 信息 。 首 先 ， 
为 了 显示 这 些 信息 ， 可 以 使 用 .hover () 方 法 ， 参 见 代码 清单 10-3。 


代码 清单 10-3 


$s (document) .ready (function() { 
$s('div.photo') .hover (function() { 
s(this) .find('.details').fadeTo('fast', 0.7); 
}, function() { 
s(this).find('.details').fadeOut('fast'); 
于 
3 


这 样 ， 当 用 户 光标 进入 照片 区 域 时 ， 相 关 信息 就 会 以 70% 的 不 透明 度 淡 入 显示 出 来 ; 而 当 用 
户 光标 离开 照片 时 ， 相 关 信息 则 立即 淡出 。 reo 























Mt. Ruapehu in summer 


Andrew McMillan 


01/13/2005 
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当然 ,实现 这 个 任务 的 方式 有 很 多 。 由 于 两 个 处 理 程序 中 有 一 部 分 代码 完全 相同 ， 因 此 可 以 
把 它们 组 合 起 来 以 减少 元 余 的 代码 。 比 如 ， 可 以 为 mouseenter 和 mouseleave 绑 定 同一 个 处 理 
程序 ， 只 在 两 个 事件 名 称 之 间 加 一 个 空格 即 可 ， 参 见 代码 清单 10-4。 


代码 清单 10-4 
$s(document) .ready (function() { 
$s('div.photo') .on('mouseenter mouseleave', function(event) { 
Var Sdetails = $(this).find('.details'); 
if (event .type == 'mouseenter') { 
sdetails.fadeTo('fast', 0.7); 
} else { 


$sdetails.fadeOut('fast'); 
}); 

1 

在 同一 个 处 理 程序 绑 定 到 两 个 事件 的 情况 下 , 通过 检测 事件 的 类 型 就 可 以 确定 是 应 该 淡 入 还 
是 应 该 淡出 。 而 查找 <aiv> 的 代码 对 两 个 事件 来 说 则 是 相同 的 ， 所 以 这 里 可 以 只 写 一 次 。 

上 毫 无 疑问 ， 这 个 例子 经 过 了 精心 设计 ， 所 以 共享 的 代码 才 会 那么 少 。 不 过 ， 在 其 他 情况 下 ， 
这 种 技术 是 可 以 显著 减少 代码 复杂 性 的 。 比 如 , 假设 我 们 在 mouseenter 事 件 发 生 时 添加 一 个 类 ， 
在 mouseleave 事 件 发 生 时 删除 它 ， 而 不 是 动态 改变 不 透明 度 ， 那 么 只 要 像 下 面 这 样 在 处 理 程序 
中 添加 一 行 代码 即 可 : 


S$(this).find('.dqetails') 
.toggleClass('entered', event.type == 'mouseenter ' ) 


无 论 如 何 ， 我们 脚本 现在 已 经 按照 预期 运行 了 一 一 但 有 一 个 例外 ， 那 就 是 当 用 户 单 击 More 
Photos 链 接 加 载 了 更 多 照片 时 ， 新 加 载 的 照片 不 会 响应 那 两 个 事件 。 还 记得 我 们 曾 在 第 3 章 提 到 
的 吗 , 事件 处 理 程序 只 会 添加 到 调用 .on () 方 法 时 已 经 存在 的 元 素 上 。 像 通过 Ajax 调用 这 样 后 来 
添加 的 元 素 ， 不 会 绑 定 那些 事件 。 当 前 , 我 们 针对 这 个 问题 给 出 了 两 个 解决 方案 : 一 是 在 加 载 了 
新 内 容 之 后 ,“ 重 新 绑 定 ”事件 处 理 程序 ， 二 是 一 开始 就 把 事件 绑 定 到 包含 元 素 上 ， 不 依赖 于 事 
件 冒 泡 。 后 一 个 解决 方案 ， 也 就 是 本 章 要 跟 大 家 继续 讨论 的 ， 叫 做 事件 委托 。 


10.2 事件 委托 


也 许 有 读者 还 记得 ， 为 了 实现 事件 委托 ， 我 们 需要 检测 sevent 对 象 的 target 属 性 ， 以 便 知 
道 事 件 目标 是 不 是 我 们 想 要 触发 行为 的 那个 元 素 。 事 件 目标 ， 指 的 是 接收 到 事件 的 那个 最 里 面 、 
最 深层 的 元 素 。 对 于 目前 的 示例 程序 而 言 , 我 们 还 面临 着 一 个 新 的 挑战 : <div class="photo"> 
元 素 不 可 能 成 为 事件 目标 ， 因 为 它 还 包含 着 其 他 元 素 ， 比 如 图 像 和 图 像 的 信息 。 

我 们 需要 使 用 .closest () 方 法 , 这 个 方法 可 以 沿 DOM 树 向 上 一 层 一 层 移 动 , 直至 找到 与 给 
定 的 选择 符 表达 式 匹 配 的 那个 元 素 。 如 果 没 有 找到 这 个 元 素 ， 那 它 就 会 像 其 他 DOM 遍 历 方法 一 
样 ， 返 回 一 个 “ 空 的 ”jQuery 对 象 。 在 这 里 ， 可 以 使 用 .closest () 像 下 面 这 样 从 包含 元 素 找到 


<div class="photo">。 
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代码 清单 10-5 


// 未 完成 的 代码 
$s (document) .ready (function() { 
$('#gallery') .on('mouseover mouseout', function(event) { 


Var Starget = S$(event .target) .closest('div.photo'); 

Var Sdetails starget.find('.details'); 

Var Srelated $ (event .elatedqTarget) 
.Closest('div.photo'); 


IE (event.type == 'mouseover' && $target.length) { 
$sdetails.fadeTo('fast', 0.7); 
} else if (event.type == 'mouseout' && !S$related.length) { 


sdetails.fadeOut('fast'); 


3 
二 


注意 ， 还 需要 把 事件 的 类 型 由 mouseenter 和 mouseleave 改 为 nouseover 和 mouseout。 
为 前 两 个 事件 只 有 在 鼠标 最 先进 入 和 最 后 离开 <div id="gallery"> 时 才 会 触发 ， 而 我 们 需要 在 
鼠标 进入 这 个 包含 <div> 内 部 的 任何 照片 时 都 触发 处 理 程序 。 然 而 ， 使 用 后 两 个 事件 又 会 引入 另 
外 一 个 问题 ， 即 必须 额外 再 检测 event 对 象 的 relatedTarget 属 性 ， 否 则 <div class=" 
details"> 就 会 反复 淡 入 淡出 。 即 使 额外 添加 了 检测 代码 ， 如 果 你 快速 移动 鼠标 进出 照片 的 话 ， 
结果 仍然 不 令 人 满意 ， 因 为 还 是 偶尔 会 有 本 应 淡出 的 <aiv class="details"> 一 直 显 示 着 。 

















10.2.1 使 用 jQuery 的 委托 方法 





在 任务 变 复杂 的 情况 下 ， 手 工 管理 事件 委托 可 能 会 非常 困难 。 好 在 ，jQuery 的 .on () 方 法 内 
置 了 委托 管理 能 力 , 为 我 们 扫除 了 这 些 障碍 。 利 用 这 种 能 力 ,我 们 的 代码 可 以 变 得 像 代 码 清单 10-4 
那样 简单 ， 参 见 代 码 清单 10-6。 





代码 清单 10-6 
s(dqocument) .ready (function() { 
$s('#gallery') .on('mouseenter mouseleave', 'div.photo', 


function(event) { 
Var Sdetails = $(this).find('.details'); 


if (event.type == 'mouseenter') { 
$sdetails.fadeTo('fast', 0.7); 

} else { 
sdetails.fadeOut('fast'); 

} 


}); 
局 


这 里 的 选择 符 '#gallery ' 与 代码 清单 10-5 中 相同 ， 而 事件 类 型 则 改 成 了 代码 清单 10-4 中 的 
mouseenter 和 mouseleave。 在 把 'div.photo' 作 为 第 二 个 参数 的 情况 下 ，.on() 方 法 会 把 
this 关 键 字 映射 为 '#gallery ' 中 与 该 选择 符 匹 配 的 元 素 。 
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有 些 开 发 人 员 使 用 .delegate() 和 .undelegate() 方 法 ， 虽然 语法 不 同 ， 
~ 但 作用 是 一 样 的 。 





10.2.2 选择 委托 的 作用 域 


由 于 我 们 要 操作 的 照片 被 包含 在 <aiv id="gallery"> 中 ， 因 此 前 面 的 例子 将 #gallery 作 
为 委托 的 作用 域 。 实 际 上 ， 照片 元 素 的 任何 祖先 元 素 都 可 以 作为 这 个 委托 的 作用 域 。 比 如 ， 可 以 
把 处 理 程序 绑 定 到 aocument 元 素 ， 因 为 它 是 页 面 中 所 有 元 素 的 祖先 。 


代码 清单 10-7 


$s(document) .ready (function() { 
$s (document) .on('mouseenter mouseleave', 'div.photo', 
function(event) { 
Var Sdetails = $(this).find('.details'); 


























if (event.type == 'mouseenter') { 
sdetails.fadeTo('fast', 0.7); 
} else { 


$sdetails.fadeOut('fast'); 


站 
3 


在 安排 事件 委托 时 ， 把 处 理 程 序 绑 定 到 aocument 很 方便 。 因为 所 有 元 素 都 是 aocument 的 后 
代 ， 这 样 不 用 担心 是 否 会 选 错 容器 。 可 是 ， 这 种 方便 也 需要 牺牲 一 定 的 性 能 。 

如 果 DOM 衣 套 结构 很 深 ,， 事件 冒 泡 通过 大 量 祖先 元 素 也 会 导致 较 大 的 性 能 损失 。 无论 我 们 想 
观察 哪个 元 素 ( 把 对 应 的 选择 符 作 为 .on() 的 第 二 个 参数 传人 )， 只 要 把 处 理 程序 绑 定 到 
document ,那么 就 需要 检查 任何 地 方 发 生 的 事件 。 在 代码 清单 10-6 中 ,光标 进入 任何 元 素 都 会 引 
发 jQuery 检查 当前 元 素 是 不 是 <div class="photo" > 元 素 。 在 复杂 的 页 面 中 ， 这 样 会 导致 性 能 损 
失 ， 在 较 多 使 用 委托 的 情况 下 性 能 损失 更 大 。 选 择 更 具体 的 委托 作用 域 可 以 有 效 减少 这 种 开销 。 



















































































10.2.3 ” 早 委 托 


先 不 管 性 能 得 失 ， 有 时 候 还 会 有 其 他 原因 让 我 们 选择 aocument 作 为 委托 作用 域 。 一 般 来 说 ， 
只 有 当 相 应 的 DOM 元 素 加 载 完毕 ， 才 能 给 它 绑 定 事件 处 理 程序 。 这 就 是 为 什么 我 们 通常 都 把 代 
码 放 到 $ (document) .ready () 内 部 的 原因 。 可 是 ，document 元 素 是 随 着 页 面 加 载 几乎 立即 就 可 
以 调用 的 ， 把 处 理 程序 绑 定 到 daocument 不 用 再 等 到 完整 的 DOM 构 建 结束 。 即 使 脚本 是 放 在 文档 
的 <headq> 中 引用 的 〈 我 们 的 例子 就 是 这 样 的 )， 我 们 也 可 以 马上 在 其 中 调用 .on () ， 参 见 代 码 清 
单 10-8。 


代码 清单 10-8 


(function($) { 
$s (document) .on('mouseenter mouseleave', 'div.photo', 
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function(event) { 
Var Sdetails = $(this).find('.details'); 


if (event.type == 'mouseenter') { 
$sdetails.fadeTo('fast', 0.7); 
} else { 


sdetails.fadeOut('fast'); 
} 
过 
}) (jQuery); 


因为 我 们 没有 等 待 整个 文档 就 绕 ， 所 以 可 以 确保 所 有 <div class="photo"> 元 素 只 要 一 
呈现 在 页 面 上 就 可 以 应 用 mouseenter 和 mouseleave 行 为 。 

要 想 理解 这 样 做 的 好 处 , 可 以 想象 把 一 个 click 事 件 处 理 程序 绑 定 到 一 个 链接 上 。 假设 这 个 
处 理 程序 要 执行 某 些 操作 ， 同 时 还 要 阻止 链接 的 默认 动作 ( 导航 到 其 他 页 面 )。 如 果 我 们 等 到 文 
档 就 绪 之 后 再 绑 定 它 , 那 很 可 能 在 绑 定 处 理 程序 之 前 用 户 已 经 点 击 该 链接 离开 了 当前 页 面 , 这 样 
就 体验 不 到 脚本 提供 的 增强 功能 了 。 相 比 之 下 ， 把 处 理 程序 绑 定 到 aocument ， 我 们 就 不 必 扫 描 
复杂 的 DOM 结 构 而 能 够 实现 早 绑 定 了 。 









































立即 被 调用 的 函数 表达 式 
我 们 使 用 了 立即 调用 的 函数 表达 式 (TIFE ) 来 取代 s(dqocument) .ready ()。 
一 ”IIFE 形 同 我 们 在 第 8 章 讨论 过 的 闭 包 ， 可 以 在 同一 个 页 面 中 使 用 其 他 脚本 时 ， 避 
免 可 能 的 函数 或 变量 的 命名 冲突 (因为 变量 都 被 “限定 ”在 了 函数 中 )。 


10.3” 自 定义 事件 


由 浏览 器 的 DOM 实 现 自然 触发 的 事件 对 任何 Web 应 用 都 是 至 关 重要 的 。 但是， 在 jQuery 代码 
中 并 不 局 限于 使 用 这 些 事件 。 而 是 可 以 在 这 些 事件 基础 上 ， 表 添加 自 定义 事件 。 我 们 曾 在 第 8 章 
简单 介绍 过 jQuery UI 部 件 如 何 触 发 事件 ,但 本 节 将 讨论 如 何在 不 创建 插件 的 情况 下 创建 和 使 用 自 
定义 事件 。 

自 定义 事件 必须 在 代码 中 通过 手工 方式 来 触发 。 从 某 种 意义 讲 ,， 自 定义 事件 类 似 于 我 们 平常 
定义 的 函数 ， 因 为 它们 都 是 一 个 预定 义 的 代码 块 ， 可 以 在 脚本 中 的 其 他 地 方 调用 执行 。.on () 方 
法 对 应 着 一 个 函数 的 定义 ， 而 .triggetr1() 方 法 对 应 着 一 次 函数 调用 。 

但 事件 处 理 程序 与 触发 它们 的 代码 是 分 离 的 。 这 意味 着 我 们 可 以 在 任何 时 间 触 发 事件 ， 而 不 
需要 知道 触发 事件 之 后 会 发 生 什么 。 常 规 的 函数 调用 只 能 执行 一 段 代码 , 而 自 定义 事件 可 以 触发 
执行 一 个 绑 定 的 事件 处 理 程序 , 也 可 以 触发 执行 多 个 事件 处 理 程序 , 甚至 可 以 不 执行 任何 事件 处 
理 程序 。 

为 了 演示 前 面 描述 的 这 些 内 容 ， 可 以 修改 Ajax 加 载 功能 ， 从 而 使 用 一 个 自 定义 函数 。 在 用 户 
请 求 更 多 照片 时 ， 我 们 会 触发 一 个 nextPage 事 件 ， 同 时 为 这 个 事件 绑 定 相应 的 处 理 程 序 ， 而 
在 .click() 处 理 程序 中 完成 之 前 所 做 的 工作 ， 参 见 代 码 清单 10-9。 
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代码 清单 10-9 


$s (document) .ready (function() { 
$('#more-photos') .click (function(event) { 
event .preventDefault(); 
$s(this) .trigger('nextPage'); 
和 3 
3 


好 ， 现 在 的 .click() 处 理 程序 的 工作 只 剩 下 很 少 了 。 在 触发 自 定义 事件 后 ， 通 过 调 
用 .preventDefault()， 它 又 阻止 了 默认 的 行为 。 大 部 分 工作 量 都 转移 到 了 针对 nextPage 事 
件 的 新 的 事件 处 理 程序 中 了 ， 人 参见 代 码 清单 10-10。 








代码 清单 10-10 


(function($) { 
$(document) .on('nextPage', function() { 
Var url = $('#more-photos') .attr('href'); 
dE “(WEL 
$s.get(url, function(data) { 
$('#gallery') .append (data); 
})3 
} 
}); 


Var pageNum = 1; 
$(document) .on('nextPage', function() { 
pageNum++; 
if (pageNum < 20) { 
$('#more-photos') .attr('href', 'pages/' + pageNum + '.html'); 
} 
else { 
$('#more-photos') .emove () ; 
} 
过。 
}) (jQuery); 


其 中 大 部 分 代码 与 代码 清单 10-2 相 同 。 最 大 的 区 别 是 把 原来 的 一 个 函数 拆 成 了 两 个 。 这 样 做 
的 目的 只 是 为 了 演示 一 次 触发 可 以 导致 多 个 绑 定 的 处 理 程序 运行 。 单 击 More Photos 链 接 会 导致 妃 
加 下 一 组 上 照片， 同时 更 新 链接 的 href 属 性 ， 如 图 10-3 所 示 。 

图 10-3 值 得 注意 的 是 ,我们 还 在 这 个 例子 中 展示 了 事件 冒 泡 的 男 一 种 应 用 。 如 果 把 nextPage 
处 理 程序 绑 定 到 触发 该 事件 链接 上 ， 那 就 需要 等 到 DOM 就 绪 。 于 是 ， 我 们 在 这 里 把 处 理 程序 绑 
定 到 了 文档 自身 ， 因 为 页 面 只 要 一 打开 文档 就 立即 可 用 ， 所 以 可 以 在 $ (document) .ready () 外 
部 来 完成 绑 定 。 实 际 上 ， 我 们 在 代码 清单 10-8 中 也 运用 了 相同 的 原理 ， 当 时 是 把 .on () 方 法 的 绑 
定 转移 到 了 $ (document) .ready () 外部。 而 利用 事件 冒 泡 ， 只 要 男 一 个 处 理 程序 不 阻止 事件 传 
播 ， 我们 的 处 理 程序 可 以 被 触发 。 
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More Photos 








book.dev/3145/10/pages/2.html 











10.3.1 无 穷 滚动 


就 像 多 个 不 同 的 事件 处 理 程序 可 以 响应 相同 事件 一 样 ,相同 的 事件 也 可 以 通过 多 种 不 同 的 方式 
来 触发 。 为 了 演示 这 一 点 ,我们 接 下 来 会 给 页 面 添 加 一 个 无 穷 滚动 功能 。 所谓 无 穷 滚动 , 是 一 种 让 
用 户 控制 滚动 条 来 加 载 内 容 的 流行 技术 ， 即 当 到 达 目 前 加 载 的 内 容 底部 时 ， 就 会 自动 取得 新 内 容 。 

我 们 先 从 一 个 简单 实现 开始 , 然后 在 后 续 的 例子 中 逐步 改进 它 。 这 个 例子 的 基本 思想 就 是 监 


听 scrol11 (滚动 ) 事件 ， 在 发 生 滚动 事件 时 测量 当前 滚动 条 的 位 置 ， 必 要 时 就 加 载 新 的 内 容 。 
下 列 代码 会 触发 代码 清单 10-10 中 定义 的 nextPage 事 件 。 


代码 清单 10-11 


(function($) { 
function checkScrollPosition() { 
var distance = $ (window) .scrollTop() + $ (window) .height (); 
if ($('#container') .height() <= distance) { 
$s (document) .trigger('nextPage'); 
} 
} 





























$s (document) .ready (function() { 
$ (window) .scroll (checkScrollPosition) 


}) 3 
}) (jQuery); 


.trigger('scroll'); 


这 个 新 的 checkscrollPosition() 函 数 在 这 里 作为 windqow 的 scrol1 事 件 处 理 程序 。 它 会 


计算 从 文档 的 顶部 到 窗口 底部 的 距离 , 然后 用 这 个 距离 与 文档 中 主 容器 的 高 度 进 行 比较 。 只 要 这 
两 个 值 一 相等 ， 就 需要 使 用 额外 的 照片 来 填充 页 面 ， 因 此 就 触发 nextPage 事 件 。 
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接 下 来 绑 定 scrol1 处 理 程序 ， 并 通过 调用 .scroll() 方 法 立即 触发 它 。 这 样 就 开始 了 整个 
过 程 ， 如 果 此 时 页 面 中 还 没有 照片 ， 就 会 发 出 一 个 Ajax 请 求 ， 如 图 10-4 所 示 。 








Photo Gallery 
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10.3.2” 自 定义 事件 参数 


在 定义 函数 时 ， 可 以 设置 任意 数量 的 参数 。 而 在 调用 函数 时 ， 再 给 这 些 参数 实际 地 传人 值 。 
类 似 地 , 在 触发 自 定义 事件 时 , 我 们 也 可 以 给 任何 注册 的 事件 处 理 程序 传人 额外 的 信息 。 这 种 技 
术 就 叫做 自 定 义 事件 参数 。 

任何 事件 处 理 程序 的 第 一 个 参数 是 由 jQuery 增强 和 扩展 之 后 的 DOM 事 件 对 象 , 在 这 个 参数 之 
后 ,我 们 可 以 根据 需要 传递 任意 数量 的 参数 。 

下 面 我 们 就 来 实际 地 看 一 看 自 定义 事件 参数 。 为 此 , 可 以 给 代码 清单 10-10 中 的 nextPage 事 
件 增加 一 个 选项 ， 通 过 它 来 指定 是 否 向 下 滚动 以 显示 新 添加 的 内 容 ， 参 见 代 码 清单 10-12。 





代码 清单 10-12 


(function($) { 
$(document) .on('nextPage', function(event, scrollToVvisible) { 
Var url = $('#more-photos') .attr('href'); 
让 EE (EL A 
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$s.get(url, function(data) { 
var $data = $(data) .appendTo('#gallery'); 
if (scrollToVisible) { 
Var newTop = $data.offset() .top; 
$ (window) .scrollTop (newTop); 
} 
checkScrollPosition(); 


四 


})s 
的 用 


我 们 已 经 给 事件 回调 函数 添加 了 scrollToVisible 参 数 。 这 个 参数 的 值 指定 了 是 否 执行 新 
的 功能 ， 即 测量 新 内 容 的 位 置 并 深 动 到 该 位 置 。 测量 只 要 使 用 .offset () 方 法 即 可 ,这 个 方法 返 
回 新 内 容 的 top 和 1left 坐 标 。 要 向 下 滚动 页 面 ， 调 用 .scrollTop () 方 法 。 

接 下 来 就 需要 向 这 个 新 参数 传人 一 个 实际 的 值 。 换 句 话说， 就 是 在 使 用 .trigge () 方 法 触 
发 事件 时 多 提供 一 个 值 。 在 通过 页 面 滚动 触发 nextPage 事 件 时 , 我 们 不 想 让 这 个 新 的 行为 发 生 ， 
因为 用 户 已 经 在 直接 操作 滚动 位 置 了 。 而 在 用 户 单 击 More Photos 时 , 我 们 希望 新 添加 的 内 容 显 示 
在 屏幕 上 ， 因 而 就 要 像 代码 清单 10-13 这 样 给 处 理 程序 传递 一 个 true 值 。 


代码 清单 10-13 


s(dqocument) .ready (function() { 
$s('#more-photos') .click(function() { 
$s(this) .trigger('nextPage', [truel]); 
return false; 


}); 
















































































$ (window) .scroll (checkScrollPosition) .trigger('scroll'); 


}):; 

在 调用 .trigger () 方 法 时 ,我 们 额外 给 事件 处 理 程 序 传递 了 一 个 数组 。 而 这 个 值 为 true 
的 数组 在 代码 清单 10-11 中 会 把 true 赋 值 给 参数 scrollToVisible。 

这 个 自 定义 事件 参数 在 调用 和 接收 的 任何 一 端 都 是 可 选 的 。 在 代码 对 .trigger () 的 两 次 调 
用 中 ， 只 有 一 次 提供 了 这 个 参数 值 。 另 一 次 调用 也 不 会 导致 错误 ， 因 为 未 传递 的 参数 将 以 
unadefined 值 代 奉 。 类 似 地 ， 在 调用 .on ('nextPage' ) 时 不 传递 scrollTovVisible 参 数 也 不 
会 出 错 。 因 为 在 传递 实际 的 值 而 参数 却 不 存在 时 ， 传 递 过 来 的 值 就 会 被 忽略 。 


10.4 节 流 事件 


代码 清单 10-11 中 实现 的 无 穷 滚动 功能 的 主要 问题 是 性 能 。 尽 管 代码 并 不 复杂 ， 但 check- 
ScrollPosition() 因数 却 需要 计算 页 面 和 窗口 的 大 小 。 由 于 某 些 浏览 器 中 的 scro11 事 件 会 在 
窗口 滚动 期 间 重 复 触发 , 因此 计算 过 程 会 不 断 累 积 。 最 终结 果 就 是 导致 页 面 忽 急 忽 缓 、 反 应 迟 顿 。 
浏览 器 中 有 几 个 原生 事件 都 会 频繁 触发 。 最 常见 的 事件 有 scroll、resize 和 mousemove。 
为 了 解决 这 个 问题 ， 就 需要 节 流 事件 。 这 个 技术 会 限制 一 些 无 谓 的 计算 ， 即 不 是 每 次 事件 发 生 都 
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计算 ， 而 是 选择 在 部 分 事件 发 生 时 计算 。 我 们 可 以 在 代码 10-13 的 基础 上 实现 这 种 技术 ， 参 见 代 
码 清单 10-14。 


代码 清单 10-14 


$s(document) .ready (function() { 
Var timer = 0; 
$ (window) .scroll (function() { 
if (Itimer) + 
timer = setTimeout (function() { 
checkScrollPosition(); 
timer = 0; 
}. 250) 
} 
}) .trigger('scroll'); 
3 


我 们 没有 直接 将 checkscrollPosition() 设置 为 scroll 事 件 处 理 程 序 ， 而 是 使 用 
JavaScript 的 setTimeout 函 数 ， 延 迟 250 毫 秒 再 调用 它 。 更 重要 的 是 ， 我 们 会 在 执行 任何 代码 之 
前 先 检查 当前 运行 的 计时 器 。 因 为 检查 一 个 简单 变量 的 值 速度 极 快 , 所 以 对 事件 处 理 程序 的 大 多 
数 调用 都 几乎 能 够 立即 返回 , 而 对 checkScrollPosition() 函数 的 调用 只 会 在 计时 器 结束 时 才 
会 发 生 ， 通 常 每 次 都 要 等 250 毫 秒 。 

通过 给 setTimeout () 设置 一 个 合理 的 值 ,就 能 够 在 即时 返 馈 与 较 高 性 能 之 间 达 成 一 个 合理 
的 折 中 。 而 我 们 的 脚本 也 可 以 成 为 页 面 中 一 位 安 分 守 己 的 好 公民 。 


其 他 节 流 方案 


前 面 这 种 节 流 技术 可 以 说 既 简 单 又 实用 。 但 是 , 节 流 的 方案 可 不 止 那 一 种 。 根 据 被 节 流 的 操 
作 的 特点 ,以 及 与 页 面 的 典型 交互 方式 , 我们 可 以 直接 给 页 面 创建 一 个 计时 器 ， 而 不 是 等 事件 开 
台 时 再 创建 ， 参 见 代 码 清单 10-15。 


代码 清单 10-15 


$s(document) .ready (function() { 
var scrolled = false; 
$ (window) .scroll (function() { 
scrolled = true; 
和 
SetInterval (function() { 
if (scrolled) { 
checkScrollPosition(); 
scrolled = false; 
} 
}, 250); 
checkScrollPosition(); 


1 
与 前 面 的 节 流 代码 不 同 ， 这 个 轮 询 式 的 方案 会 调用 JavaScript 的 setInterval () 函数 ， 
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250 毫 秒 检 查 一 次 scrolled 变 量 的 状态 。 不 管 什么 时 候 发 牛 滚动 事件 ，scrolleq 都 会 被 设置 
为 true， 以 确保 在 下 一 次 轮 询 时 调用 checkscrollPosition()。 绪 果 与 代码 清单 10-14 是 类 
似 的 。 





在 频繁 重复 的 事件 发 生 期 间 限 制 处 理 次 数 的 第 三 种 技术 叫 消除 抖动 

( debouncing )。 这 种 技术 是 以 电子 开关 重复 发 送信 号 必需 的 后 处 理 技术 命名 的 ， 

一 。 可 以 确保 在 发 生 多 个 事件 的 情况 下 ， 最终 只 会 有 一 个 事件 实际 地 起 作用 。 我 们 将 
在 第 13 章 介绍 一 个 使 用 这 种 技术 的 例子 。 


10.5 ”扩展 事件 


诸如 mouseenter 和 ready 这 样 的 事件 , 都 是 jQuery 内 部 的 特殊 事件 。 这 些 事件 使 用 了 jQuery 
精心 设计 的 事件 扩展 框架 , 可 以 在 事件 处 理 程序 生命 周期 的 不 同时 间 点 上 执行 。 它 们 可 以 对 被 绑 
定 或 被 反 绑 定 的 事件 处 理 程序 作出 反应 , 甚至 可 以 像 被单 击 的 链接 和 被 提交 的 表单 一 样 具 有 可 阻 
止 的 默认 行为 。 利 用 这 些 事件 扩展 API， 可 以 创建 出 与 原生 DOM 事 件 非常 类 似 的 新 事件 。 

代码 清单 10-13 中 针对 滚动 实现 的 节 流 行为 十 分 有 用 ， 可 以 将 其 一 般 化 ， 以 便 在 其 他 项 目 中 
重用 。 为 此 ， 我 们 可 以 创建 一 个 特殊 的 新 事件 ， 用 它 来 封装 相应 的 节 流 技术 。 

为 了 实现 一 个 事件 的 特殊 行为 ， 需 要 为 $ .event .special 对 象 添加 属性 。 这 个 属性 的 键 是 
我 们 的 事件 名 称 , 而 它 的 值 本 身 是 一 个 对 象 。 这 个 特殊 的 事件 对 象 包含 可 以 在 不 同时 刻 调用 的 回 
调 函 数 :: 

(1) addq 会 在 每 次 为 当前 事件 绑 定 处 理 程 序 时 调用 ; 

(2) remove 会 在 每 次 为 当前 事件 删除 处 理 程序 时 调用 ; 

(3) setup 会 在 为 当前 事件 绑 定 处 理 程序 ， 且 没有 为 元 素 的 这 个 事件 绑 定 其 他 处 理 程 序 时 

调用 ; 

(4) teardown 是 setup 的 反 操 作 ， 会 在 某 个 元 素 删 除 这 个 事件 的 最 后 一 个 处 理 程序 时 调用 ; 

(5) _qaefault 是 当前 事件 的 默认 行为 ， 在 没有 被 事件 处 理 程序 阻止 的 情况 下 会 执行 。 

在 使 用 这 几 个 回调 函数 时 , 可 以 充分 发 挥 我 们 的 创造 力 。 接 下 的 例子 将 会 探讨 一 种 非常 常见 
的 情况 ， 那 就 是 响应 某 些 浏览 器 条 件 而 自动 触发 事件 。 如 果 没 有 处 理 程序 监听 事件 ,那么 监视 状 
态 并 触发 事件 就 是 一 种 浪费 。 所 以 , 我 们 可 以 通过 setup 回 调 函 数 来 实现 只 在 必要 时 进行 初始 化 ， 
参见 代码 清单 10-16。 


代码 清单 10-16 


(function($) { 
$s.event.special.throttledScroll = { 
setup: function(data) { 
var timer = 0; 
s(this).on('scroll.throttledScroll', function(event) { 
if (!timer) { 
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timer = setTimeout (function() { 
$s (this) .triggerHandler('throttledScroll'); 
timer = 0; 
}, 250)5 
} 
js 
Pa 
teardown: function() { 
$s (this) .off('scroll.throttledSscroll'); 
} 
js 
}) (jQuery); 








对 于 这 个 滚动 节 流 事件 ， 我 们 需要 绑 定 党 规 的 scrol11 处 理 程序 ， 该 处 理 程序 使 用 与 代码 清 
单 10-14 中 用 到 的 相同 的 setTimeout 技 术 。 每 当 计时 器 结束 时 ， 就 会 触发 这 个 自 定义 事件 。 每 个 
元 素 只 需要 一 个 计时 需 ， 所 以 setup 回 调 函数 可 以 满足 我 们 的 要 求 。 通 过 以 scrol11 处 理 程序 作 
为 命名 空间 ， 可 以 在 teardown 被 调用 时 轻松 地 删除 相应 的 处 理 程序 。 

为 了 使 用 这 个 事件 ， 我 们 要 做 的 就 是 像 下 面 这 样 为 chrottledscrol1 绑 定 处 理 程序 。 这 样 
不 仅 极 大 地 简化 了 绑 定 事件 的 代码 , 同时 还 实现 了 一 个 非常 方便 的 可 重用 的 节 流 机 制 , 参见 代码 
清单 10-17。 

















代码 清单 10-17 


(function($) { 
$.event.special.throttledScroll = { 
setup: function(data) { 


Var timer = 0; 
s(this).on('scroll.throttledSscroll', function(event) { 
IE (!timer) { 
timer = setTimeout (function() { 
$s (this) .triggerHandler('throttledScroll'); 
timer = 0; 
}» 250)s 
} 
))3 
js 
teardown: function() { 
$s (this) .off('scroll.throttledScroll'); 
} 
js 
$s (document) .on('mouseenter mouseleave', 'div.photo', function(event) { 
Var Sdetails = $(this).find('.details'); 
if (event .type == 'mouseenter') { 
$sdetails.fadeTo('fast', 0.7); 
} else { 
$details.fadeOut('fast'); 
} 


3 


$s (document) .on('nextPage', function(event, scrollToVisible) { 
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var url = $('#more-photos') .attr('href'); 
了 EEL) 4 
$s.get(url, function(data) { 
var $data = $(data) .appendTo('#gallery'); 
if (scrollToVisible) { 
Var newTop = $data.offset().top; 
$ (window) .scrollTop (newTop); 
} 


checkScrollPosition(); 


Var pageNum = 1; 

$s (document) .on('nextPage', function() { 
pageNum++; 

if (pageNum < 20) { 

) 


$('#more-photos') .attr('href', 'pages/' + pageNum + '.html'); 
} 
else { 

$('#more-photos') .emove () ; 
} 


四: 


function checkScrollPosition() { 
var distance = $ (window) .scrollTop() + $ (window) .height (); 
if ($('#container') .height() <= distance) { 
$ (document) .trigger('nextPage'); 
} 
} 


$s (document) .ready (function() { 
$('#more-photos') .click(function(event) { 
event .preventDefault(); 
$s (this) .trigger('nextPage', [truel]); 
}); 


$s (window) 
.on('throttledscroll', checkScrollPosition) 
.trigger('throttledScroll'); 





}) ; 
}) (jQuery); 


深入 学 习 特殊 事件 


虽然 本 章 主要 介绍 与 处 理事 件 相关 的 高 级 技术 , 但 创建 特殊 事件 则 是 更 加 高 级 的 技术 ,详细 
地 讨论 它 超出 了 本 书 的 范畴 。 前 面 展示 的 throttledscrol1 的 例子 只 是 这 种 技术 最 简单 、 最 党 
见 的 用 法 。 其 他 可 能 的 应 用 包括 : 

口 修改 事件 对 象 ， 以 便 事件 处 理 程序 可 以 使 用 不 同 的 信息 ; 

D 让 DOM 中 的 某 个 地 方 发 生 的 事件 触发 与 不 同 元 素 关联 的 行为 ; 
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口 对 新 的 浏览 器 特有 的 非 标准 DOM 事 件 作 出 响应 ， 让 jQuery 代码 像 处 理 标 准 事件 一 样 处 理 
它们 ; 

口 改变 处 理事 件 冒 泡 和 事件 委托 的 方式 。 

这 些 任 务 都 有 可 能 相当 复杂 。 如 果 想 更 深入 地 了 解 事件 扩展 API 给 我 们 提供 的 可 能 性 ， 建 议 
大 家 阅读 jQuery 学 习 中 心 的 文档 : http://learn.jquery.com/events/event-extensions/。 




















10.6 小结 


如 果 能 够 全 面 地 利用 jQuery 的 事件 系统 ， 那 将 给 我 们 的 工作 带 来 极 大 的 便利 。 本 章 介绍 了 这 
个 系统 的 几 个 方面 ， 包 括 事 件 委 托 方法 、 自 定义 事件 和 事件 扩展 API。 同 时 ， 还 讨论 了 如 何 避 免 
事件 委托 以 及 频繁 触发 事件 的 一 些 陷阱 。 

















延伸 阅读 


要 了 解 有 关 选 择 符 与 遍历 方法 的 完整 介绍 ， 请 参考 本 书 附录 C 或 jQuery 官方 文档 : 
http://api.jquery.com/。 


10.7 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 人 代码。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
“挑战 ”练习 有 一 些 难度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : 
http://api.jquery.com/。 
(1) 当 用 户 单 击 照片 时 ,为 包含 照片 的 <div> 添 加 或 删除 selected 类 。 要 保证 通过 Next Page 
链接 添加 的 照片 同样 也 具有 这 种 行为 。 
(2) 添加 一 个 名 为 pageLoaded 的 自 定义 事件 ， 在 新 一 组 照片 加 载 完 成 后 触发 。 
(3) 使 用 nextPage 和 pageLoaded 处 理 程序 ， 仪 在 加 载 新 页 面 的 过 程 中 在 页 面 底部 显示 一 条 
“正在 加 载 ” 消 息 。 
(4) 为 照片 绑 定 mousemove 处 理 程序 ， 记 录 鼠 标的 当前 位 置 (使 用 console.1og() )。 
(5) 改进 mousemove 处 理 程序 ， 使 其 每 秒 钟 最 多 记录 5 次 位 置信 息 。 
(6) 挑战 : 创建 一 个 新 的 名 为 tripleclick 的 特殊 事件 ， 当 鼠标 在 500 毫 秒 内 单 击 3 次 的 情况 
下 触发 。 为 了 测试 这 个 事件 ， 请 给 <h1> 元 素 绑 定 一 个 tripleclick 处 理 程序 ,“ 三 击 ” 
这 个 <h1> 可 以 隐藏 或 显示 <div id="gallery"> 的 内 容 。 
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在 学 习 为 Web 应 用 添加 样式 与 动画 的 时 候 ， 我 们 已 经 介绍 了 jQuery 动画 效果 的 很 多 用 途 。 
在 页 面 上 显示 和 隐藏 对 象 可 以 说 是 小 菜 一 碟 ， 缩 放 元 素 也 能 做 到 优雅 流畅 ， 而 重新 定位 节点 则 
可 谓 平 滑 自然 。 实 际 上 ，jQuery 可 以 实现 的 效果 还 远 不 止 这 些 ， 还 有 更 多 技巧 和 用 法 有 竺 我们 
去 人 研究 。 

第 4 章 介绍 了 jQuery 的 基本 动画 功能 ， 本 章 我 们 就 来 学 习 一 些 这 方面 的 高 级 特性 : 
口 在 动画 运行 期 间 跟 踪 它 的 状态 ; 
口 在 运行 期 间 中 断 动 画 ; 
口 在 页 面 上 以 全 局 方式 修改 所 有 效果 ; 
口 在 动画 结束 后 马上 执行 的 延迟 对 象 ; 
口 在 运行 过 程 中 控制 动画 的 缓 动 消 数 。 


11.1 再 谈 动画 


为 了 让 大 家 回忆 起 jQuery 的 效果 方法 ， 同 时 也 为 本 章 的 讲解 设置 一 个 起 点 ,我 们 就 先 从 简单 
的 鼠标 悬 停 动 画 开 始 吧 。 这 个 悬 停 动画 就 是 在 一 个 页 面 上 ， 其 中 包含 几 张 照片 的 缩 略图 ， 当 用 户 
鼠标 移动 到 每 个 缩 略图 上 时 ， 照 片 会 “膨胀 "， 而 当 鼠 标 离开 时 ， 照 片 又 会 收缩 回 原来 的 大 小 。 
这 个 页 面 的 HTML 代 码 (如 下 所 示 ) 还 包含 一 些 文本 内 容 ,， 但 目前 是 隐藏 的 ， 本 章 后 面 会 用 到 
它们 。 
<div class="team"> 
<div class="member"> 
<img class="avatar" src="photos/rey.jpg" alt="" /> 
<div class="name">Rey Bango</div> 
<div class="location">Florida</div> 


<p class="bio">Rey Bango is a consultant living in South Florida, specializing in 
web application development...</p> 

















</div> 
<div class="member"> 
<img class="avatar" src="photos/scott.jpg" alt="" /> 


<div class="name">Scott Gonzélez</div> 
<div class="location">North Carolina</div> 
<div class="position">jQuery UI Development Lead</div> 
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<p class="bio">Scott is a web developer living in Raleigh, NC...</p> 


</div> 
<!-- 以 下 的 代码 类 同 ... --> 
</div> 
下 载 示 例 代码 
a 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 


Q 档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示 例 ， 可 以 从 以 下 地 址 下 载 完 整 的 示例 代 
码 : Packt Publishing 网 站 http://www.packtpub.com/support ， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


最 初 ， 每 幅 照 片 相 关 的 文本 都 通过 CSS 隐 藏 了 ， 因 为 相应 的 <aiv> 都 被 挪 到 了 它们 
overflow:hidden 容 器 的 左边 : 


.member { 
position: relative; 
overflow: hidden; 


.member div { 
position: absolute; 
left: -300px; 
width: 250px; 

} 


以 上 HTML 加 上 CSS 会 得 到 垂直 排列 的 一 组 图 像 ， 如 图 11-1 所 示 。 与 每 幅 图 像 关 联 的 文本 内 
容 和 暂时 先 隐 藏 了 。 











Executive Board 


The Executive Board is responsible forthe day-to-day operations of the jQuery project, and has powers 
delegated to it by our governance plan or a regular vote of the voting membership. The Executive Board is 


made up of seven members of the voting membership, elected twice annually by the voting membership, in 
October and April， 
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为 了 修改 图 像 的 大 小 ,我 们 将 把 其 高 度 和 宽度 从 75px 变 为 85px。 与 此 同时 , 为 了 保持 图 像 居 
中 ， 还 要 将 其 内 边 距 由 5px 减 少 为 0px， 参 见 代 码 清 单 11-1。 


代码 清单 11-1 


$s (document) .ready (function() { 
$s('div.member') .on('mouseenter mouseleave', function(event) { 
Var size = event.type == 'mouseenter' ? 85 : 75; 
Var padding = event .type == 'mouseenter' ? 0 : 5; 
s(this).find('img') .animatel(t{ 
width: size, 
height: size, 
paddingTop: padding, 
paddingLeft: padding 
}) 3 
上 ) 
小) 


代码 清单 11-1 中 代码 的 重复 了 第 10 章 的 模式 。 因 为 在 鼠标 进入 和 离开 指定 区 域 时 要 执行 的 大 
部 分 操作 相同 ， 所 以 我 们 把 mouseenter 和 mouseleave 这 两 个 事件 处 理 程序 组 合 到 了 一 个 函数 
中 ， 而 没有 用 两 个 回调 函数 去 调用 .hover () 。 这 个 联合 的 处 理 程序 首先 根据 当前 事件 的 类 型 来 
确定 size 和 padding 的 值 ， 然 后 再 把 这 两 个 值 传 给 .animate () 方 法 。 

好 了 ， 现 在 当 鼠 标 放 到 一 张 图 像 上 时 ， 它 就 会 得 比 其 他 图 像 稍 大 一 些 ， 如 图 11-2 所 示 。 


QO 
攻 
| 

















3 











图 11-2 re 
11.2 ”观测 及 中 断 动 画 


刚刚 完成 的 这 个 基本 的 动画 暴露 出 一 个 问题 。 如 果 mouseenter 和 mouseleave 事 件 发 生 后 ， 
有 足够 的 时 间 让 动画 完成 ， 动 画 就 可 以 达到 预期 效果 。 可 是 ,一 旦 触发 这 两 个 事件 的 速度 太 快 ， 
反复 次 数 太 多 ,图像 则 会 在 最 后 一 次 事件 触发 后 反复 多 次 增 大 和 缩小 。 之 所 以 会 这 样 , 原因 正如 
第 4 章 所 介绍 的 ， 一 个 给 定 元 素 的 动画 会 逐一 被 添加 到 一 个 队列 中 ， 然 后 再 依次 调用 。 第 一 个 动 
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画 会 立即 被 调用 ， 在 指定 时 间 内 完成 ， 然 后 从 队列 中 移 除 。 此 时 ， 第 二 个 动画 又 排 在 了 第 一 位 ， 
于 是 接着 被 调用 ， 完 成 ， 移 除 ， 以 此 类 推 ， 直 至 队列 为 空 。 

很 多 情况 下 ,jQuery 中 这 个 叫做 fx 的 动画 队列 都 不 会 给 我 们 带 来 问题 。 不 过 , 在 遇 到 像 我 们 
前 面 例子 中 这 种 悬 售 动画 时 ， 就 要 跟 这 个 队列 斗 斗 智 了 。 














11.2.1 确定 动画 状态 





若 要 避免 产生 不 合 需要 的 动画 队列 , 一 种 方式 是 使 用 jQuery 自 定 义 的 :animated 选 择 符 。 在 
mouseenter/mouseleave 事 件 处 理 程序 中 ， 可 以 使 用 这 个 选择 符 来 检测 图 像 ,看 它 当 前 是 否 正 


处 于 动画 的 过 程 中 ， 如 代码 清单 11-2 所 示 。 
代码 清单 11-2 


$s(document) .ready (function() { 





$s('div.member') .on('mouseenter mouseleave', 
var $image = $(this) .find('img'); 
if (!$image.is(':animated') || event.type 
Var size = event.type == 'mouseenter' 
Var padding = event.type == 'mouseenter' 


Simage.animate({ 
width: size, 

height: size, 
paddingTop: padding, 
paddingLeft: padding 


有 有 
} 


当 用 户 的 鼠标 进入 成 员 (member ) <div> 时 ， 























function(event) { 


== 'mouseleave') { 


BS 5 


图 像 应 该 只 在 它 已 经 完成 动画 时 再 开始 新 动 











画 。 当 鼠标 离开 时 ,不管 是 什么 情况 都 应 该 立即 开始 动画 ， 因 为 鼠标 离开 之 后 就 应 该 立即 恢复 原 


来 的 大 小 和 内 边 距 。 


这 样 ， 我 们 就 成 功 地 避免 了 代码 清单 11-1 那 失控 的 动画 ， 但 现在 的 动画 仍然 还 需要 改进 。 当 
鼠标 快速 进入 和 离开 <div> 时 ， 图 像 仍然 会 完成 整个 mouseenter 动 画 ( 增 大 )， 然 后 才 开 始 
mouseleave 动 画 (缩小 )。 说 实话 ， 这 并 不 是 理想 的 效果 ， 但 测试 :animated 伪 类 勾引 入 了 一 


个 更 大 的 问题 : 如 果 鼠 标 进 入 <aiv> 时 ， 























图 像 正 在 “缩小 "， 那 么 此 后 的 图 像 也 不 会 再 增 大 了 。 














只 有 当 动 画 完成 之 后 发 生 的 mouseenter 和 mouseleave 事 件 ， 才 会 引发 男 一 次 动画 。 这 说 明 ， 
尽管 :animated 选 择 符 适 用 于 在 某 些 情况 下 检测 动画 状态 ,但 在 我 们 这 里 还 不 够 。 





11.2.2 ”中 止 运行 的 动画 


好 在 ，jQuery 还 有 一 个 方法 ， 可 以 玫 我 们 解决 代码 清单 11-2 中 存在 的 两 个 问题 。 这 个 方法 就 








是 .stop (), 它 能 在 动画 运行 过 程 中 让 动画 立即 停止 。 为 了 利用 这 个 方法 , 我 们 要 回 到 代码 清单 


11-1 的 方案 上 来 。 只 要 在 .find() 和 .animate() 之 间 插 入 .stop() 即 可 ， 参见 代码 清单 11-3。 
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代码 清单 11-3 


s(dqocument) .ready (function() { 
$s('div.member') .on('mouseenter mouseleave', function(event) { 
Var size = event.type == 'mouseenter' ? 85 : 75; 
var padding = event .type == 'mouseenter' ? 0 : 5; 
s(this) .find('img') .stop() .animatel({ 
width: size, 
height: size, 
paddingTop: padding, 
paddingLeft: padding 


人 

有 

这 里 的 关键 是 在 处 理 新 动画 之 前 先 停止 当前 动画 。 这 样 ， 即 使 鼠标 反复 进入 和 离开 ,之 前 我 
们 遇 到 的 问题 也 不 会 再 出 现 了 。 因为 当前 动画 总 是 会 立即 完成 , 因而 fx 队伍 中 的 动画 从 来 都 不 会 
超过 1 个 。 在 鼠标 最 后 不 再 活动 的 时 候 , 最 后 一 个 动画 就 会 完成 。 结 果 根 据 最 后 一 次 触发 的 事件 ， 
图 像 不 是 完全 增 大 (mouseenter )， 就 是 收缩 回 其 原来 大 小 ( mouseleave )。 

中 止 动画 的 注意 事项 

由 于 .stop() 方 法 默认 情况 下 会 在 动画 的 当前 位 置 中 止 动画 , 因而 在 使 用 简写 动画 方法 的 情 
况 下 ,就 有 可 能 导致 意外 的 结果 。 在 动画 之 前 ,， 这些 简写 的 动画 方法 会 确定 最 终 的 值 ， 然 后 动态 
变化 到 该 值 。 比 如 说 ， 如 果 使 用 .stop() 在 .slideDown() 动 画 的 中 途 将 其 中 止 ， 然 后 调 
用 .sliqaeUp() 。 那 么 下 次 再 在 同一 个 元 素 上 调用 .slLidaepown () 时 ， 就 只 会 向 下 滑动 到 上 一 次 
停止 时 的 高 度 。 为 了 解决 这 个 问题 ，. stop () 方 法 可 以 接收 两 个 布尔 值 参数 ( true/false )， 
其 中 第 二 个 参数 叫 goroEnda。 如 果 把 这 个 参数 设置 为 true， 那 么 当前 动画 不 仅 会 停止 ， 而 且 会 
立即 跳 到 最 终 值 。 当 然 ， 这样 做 的 结果 就 是 看 起 来 有 点 突 巨 。 所 以 更 好 的 办 法 是 把 最 终 值 保存 在 
一 个 变量 中 ,使 用 .animate () 显 式 变化 到 该 值 ， 而 不 要 依赖 jQuery 确定 的 值 。 











































































































jQuery 还 有 一 个 方法 可 以 中 断 动 画 : .finish()。 这 个 方法 与 .stop (true， 

true) 效果 类 似 ， 因 为 它 会 清除 排队 的 动画 并 使 当前 动画 跳 到 最 终 值 。 不 过 ， 

与 .stop (true，true) 不 同 的 是 ， 它 也 会 使 所 有 排队 的 动画 都 跳 到 各 自 的 最 
终 值 。 


11.3 全 局 效果 属性 


jQuery 的 效果 模块 中 包含 一 个 非常 方便 的 $. fx 对 象 , 在 需要 彻底 改变 动画 的 性 质 时 , 可 以 访 
问 这 个 问题 。 尽 管 这 个 对 象 的 某 些 属性 名 不 见 经 传 ， 只 为 jQuery 库 本 身 使 用 而 设计 , 但 男 外 一 些 
属性 则 可 以 供 我 们 在 全 局 层面 上 修改 动画 运行 的 效果 。 在 接 下 来 的 例子 中 , 我 们 来 学 习 几 个 文档 
中 有 记载 的 属性 




















O 
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11.3.1 禁用 所 有 效果 


前 面 我 们 已 经 讨论 了 一 种 中 止 当前 动画 运行 的 方式 , 但 如 果 想 要 完全 停止 所 有 动画 怎么 办 ? 
比如 说 , 我 们 会 在 默认 情况 下 提供 动画 ,但 在 一 些 低 配置 设备 ， 比 如 非 智能 手机 上 ， 就 需要 禁用 
这 些 动画 ; 和 否则， 这 些 设备 中 的 动画 就 会 显得 支离破碎 。 或 者 ， 当 用 户 认 为 动画 会 分 散 其 注意 力 
时 ， 也 应 该 允许 用 户 关闭 动画 。 为 了 实现 这 个 功能 ， 只 要 简单 地 把 $. fx .off 属 性 设置 为 true 即 
可 。 为 了 演示 这 个 例子 ,我们 来 显示 之 前 隐藏 的 按钮 ， 以 便 让 用 户 能 够 打开 或 关闭 动画 ,参见 代 
码 清单 11-4。 


代码 清单 11-4 


S( '#fEx-toggle') .show().on('click'，function() { 
Sf OEE = THE Off 
六 


这 样 ， 原 来 隐藏 的 按钮 显示 在 了 介绍 性 文字 与 之 后 的 照片 之 间 ， 如 图 11-3 所 示 。 




















Executive Board 
The Executive Board is responsible for the day-to-day operations of the jQuery project, and has powers 
delegated to it by our governance plan or a regular vote of the voting membership. The Executive Board is 


made up of seven members of the voting membership, elected twice annually by the voting membership, in 
October and April. 


( (Toggle Animations ) 


图 11-3 


当 用 户 单 击 这 个 按钮 把 动画 关闭 时 , 接 下 来 的 动画 一 一 增 大 和 收缩 图 片 都 会 瞬间 完成 (持续 
0 毫秒 )， 而 任何 回调 函数 也 都 儿 乎 在 瞬间 调用 完毕 。 


11.3.2 ”定义 效果 时 长 


$ . fx 对 象 还 有 一 个 speeds 属 性 。 这 个 属性 本 身 是 一 个 对 象 ， 包 含 三 个 属性 ， 通 过 jQuery 核 
心 源 代码 中 这 一 小 段 可 以 看 出 来 : 
speeds: { 
slow: 600, 
fasts 200, 
/ /默认 速度 
_default: 400 
} 


我 们 知道 所 有 jQuery 的 动画 方法 都 提供 了 一 个 可 选 速度 (或 持续 时 间 ) 参数 。 看 看 
$ .fx.speeds 对 象 , 就 知道 字符 串 'slow' 和 'fast' 分 别 对 应 着 600 毫 秒 和 200 毫 秒 。 每 次 调用 一 
个 动画 方法 ，jQuery 都 要 通过 以 下 步骤 来 确定 效果 的 持续 时 间 。 
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(1) 检测 $. fx.off 是 否 为 true。 如 果 是 则 持续 时 间 为 0。 
(2) 检测 传人 的 持续 时 间 是 否 为 数值 ; 如果 是 ， 则 将 持续 时 间 设 置 为 该 毫秒 数 。 
(3) 检测 传人 的 持续 时 间 是 否 与 $. fx.speeds 的 某 个 属性 键 匹配 。 如 果 是 ， 则 将 持续 时 间 设 





























置 为 该 属性 的 值 。 
(4) 如 果 前 面 检 测 未 发 现 传 人 持续 时 间 参 数 ， 则 将 持续 时 间 设 置 为 $. fx. speeds._qdefault 
的 值 。 


现在 , 我们 就 明白 了 : 只 要 传人 的 持续 时 间 字 符 串 不 是 'slow' 或 'fast' ,那么 动画 的 持续 
时 间 就 是 默认 的 400 毫 秒 。 更 进一步 ， 要 想 添加 自 定义 的 速度 选项 ， 只 要 给 $ .fx.speeds 添 加 一 
个 属性 即 可 。 比 如 ， 执 行 $ .fx.speeds.crawl = 1200 这 行 代码 之 后 ， 就 可 以 在 任何 动画 方法 
中 使 用 'crawl ' 把 动画 持续 时 间 设 置 为 1200 片 秒 : 

$s (someElement) .animate({width: '300px'}, 'crawl'); 

尽管 输入 'crawl' 并 不 比 直接 写 1200 更 省 事 儿 , 但 在 大 型 项 目 中 使 用 自 定义 速度 会 更 适合 那 
些 共享 动画 速度 的 情况 , 因为 修改 起 来 很 方便 。 假如 需要 修改 速度 , 不 用 在 代码 里 执行 查找 替换 ， 
一 处 一 处 地 修改 ， 而 上 只 要 修改 $ .fx.speeds .crawl 的 值 即 可 。 

自 定 义 速度 当然 有 用 , 但 更 有 用 的 怒 怕 还 得 说 是 修改 默认 速度 了 。 很 简单 ,修改 默认 速度 就 
是 修改 _qaefault 属 性 的 值 ， 参 见 代 码 清单 11-5。 


代码 清单 11-5 

$.fx.speeds._ qdqefault = 250; 

这 样 , 我 们 就 定义 了 一 个 新 的 更 快 的 默认 速度 ,除非 我 们 指定 持续 时 间 参 数 ,否则 任何 新 动 
画 都 会 使 用 这 个 默认 的 速度 。 为 了 演示 这 一 点 ， 需 要 在 页 面 中 添加 另 一 个 可 交互 的 元 素 。 换 句 话 
说 ， 当 用 户 单 击 人 物 头像 时 ， 要 显示 每 个 人 的 详细 信息 。 为 此 ,我 们 要 制造 一 种 细节 信息 从 头像 
底下 “展开 ”的 假象 ， 也 就 是 让 细节 信息 从 头像 下 面 移动 出 来 ,直到 它们 最 终 的 位 置 。 如 代码 清 
单 11-6 所 示 。 


代码 清单 11-6 


$s (document) .ready (function() { 
function showDetails() { 
S(tHis} ,find (div ) Gss(t 
display: 'block', 
left: '-300px', 
top: 0 
}) .each (function(index) { 
s(this) .animatel({ 
left: 0, 
top: 25 * index 
})3 
} 3 
} 
$s('div.member') .click(showDetails); 


}) > 
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这 样 , 单 击 每 个 人 的 照片 时 ， 就 可 以 调用 showpetails () 这 个 处 理 函 数 。 这 个 函数 先 设置 包 
含 细 节 信 息 的 <aiv> 元 素 的 起 始 位 置 ， 把 它 放 在 每 个 的 头像 下 面 。 然 后 ， 再 把 每 个 元 素 以 动画 方 
式 移动 到 它们 的 最 终 位 置 。 通 过 调用 .each () 方 法 ， 可 以 分 别 计算 出 每 个 元 素 的 最 终 top 位 置 值 。 
动画 结束 后 ， 文 本 会 显示 出 来 ， 如 图 11-4 所 示 。 


本 
图 11-4 


因为 .animate() 方 法 是 在 两 个 不 同 <aiv> 上 分 别 调用 的 ,所 以 这 两 个 动画 不 会 排队 ， 而 是 
几乎 同时 发 生 。 此 外 ,由 于 并 没有 指定 动画 的 持续 时 间 , 因而 使 用 的 是 新 的 默认 时 间 : 250 毫 秒 。 

再 单 击 其 他 成 员 的 照片 时 , 应 该 隐藏 之 前 显示 的 信息 。 要 想 跟踪 当前 显示 的 是 哪 一 个 成 员 的 
详细 信息 ， 只 要 使 用 一 个 active 类 即 可 ， 参 见 代 码 清 单 11-7。 


代码 清单 11-7 


var Smember = S$(this); 
if (Smember .hasClass('active')) { 
return; 


} 









































$s('div.member.active') 
.removeClass ('active') 
.children('div').fadeOut(); 

smember.addClass('active'); 


新 增 的 代码 放 在 了 showpetails () 函数 前 面 ， 也 就 是 在 被 单 击 的 成 员 <aiv> 中 添加 active 
类 ,通过 找到 这 个 类 ,很 容易 确定 不 可 见 的 元 素 并 将 其 以 动画 方式 淡出 ,如 果 被 单 击 的 成 员 <aiv> 
有 这 个 active 类 ， 那 就 直接 返回 ， 什 么 也 不 做 了 。 

注意 ,调用 的 .fageout () 方 法 也 使 用 了 前 面 定义 的 比较 快 的 250 毫 秒 持续 时 间 。 这 个 默认 
值 对 jQuery 所 有 的 预 置 效果 都 是 有 效 的 ， 就 像 它 对 前 面 那个 .animate () 方法 起 作用 一 样 。 


11.4 多 属性 缓 动 


showDetails() 函数 基本 实现 我 们 最 初 设想 的 “展开 ”效果 , 但 因为 Lop 和 1left 属 性 的 动画 
速度 相同 ， 看 起 来 还 是 有 点 像 “ 滑 入 ”效果 。 只 要 把 top 属 性 的 缓 动 函 数 修 改 为 easeInQeuart， 
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就 可 以 改变 一 下 效果 ; 也 就 是 让 元 素 以 曲线 的 方式 运动 ， 而 不 是 径直 地 出 来 。 不 过 别 忘 了 , 使 用 
非 swing 和 1ineaz 的 任何 组 动 函 数 都 需要 搬 件 ， 比 如 jQuery UI ( http://jqueryui.com/ )， 参 见 代码 
清单 11-8。 


代码 清单 11-8 


smember.find('div').css(t{ 
display: 'block', 
left: '-300px', 
top; 0 
}) .each (function(index) { 
s(this) .animatel({ 
left: 0, 
top: 25 * index 
}2 4 
Quration: 'slow', 
specialEasing: { 
top: 'easeInQuart' 














]) 7 

}); 
通过 specialEasing 选 项 可 以 为 每 个 要 应 用 动画 的 属性 设置 不 同 的 加 速度 曲线 。 任 何 没 有 
包含 在 这 个 选项 中 的 属性 ,都 会 使 用 easing 选 项 中 指定 的 缓 动 函数 一 一 如 果 提 供 了 的 话 ; 否则 ， 
就 要 使 用 默认 的 swing 函 数 。 

现在 , 我 们 就 做 好 了 一 个 非常 有 吸引 力 的 动画 效果 ， 能够 优雅 地 展示 每 个 人 的 详细 信息 。 可 
是 , 还 没有 显示 每 个 人 的 简介 啊 ! 在 讨论 怎么 显示 每 个 人 的 简介 之 前 ,我 们 还 得 稍微 跑 跑 题 ， 先 
介绍 一 下 jQuery 延迟 对 象 机 制 。 

















11.5 ”使 用 延迟 对 象 


有 时 候 , 我 们 想 在 某 个 过 程 完成 后 执行 一 项 操作 ， 但 不 必 知 道 该 过 程 需要 多 长 时 间 完 成 ,其 
至 不 必 知 道 它 是 否 能 够 成 功 完成 jQuery 为 此 引入 了 一 个 新 概念 , 叫做 延迟 对 象 ( deferred object )。 
延迟 对 象 用 以 封装 一 个 需要 花 一 定时 间 才 能 完成 的 操作 。 
通过 调用 $ .Deferrea() 构 造 函 数 可 以 创建 一 个 新 的 延迟 对 象 。 有 了 延迟 对 象 之 后 ， 就 可 以 
执行 长 时 间 的 操作 ,然后 在 成 功 或 不 成 功 的 情况 下 调用 这 个 对 象 的 .resolve () 或 .reject () 方 Ws 
法 。 不 过 , 很 少 需要 手工 调用 这 两 个 方法 。 一 般 来 说 , 我 们 不 必 自 己 创建 自己 的 延迟 对 象 , jQuery 
或 其 插件 会 为 我 们 创建 这 个 对 象 并 调用 .resolve () 或 .reject 方法。 而 我 们 只 需 学 习 如 何 使 
用 它们 创建 的 这 个 对 象 即 可 。 




















本 章 不 会 讨论 $.Deferred() 构 造 函 数 的 原理 , 而 只 讨论 如 何在 实现 效果 时 
利用 延迟 对 象 。 第 13 章 还 会 在 讨论 Ajax 请 求 的 时 候 再 进一步 探索 延迟 对 象 。 
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每 一 个 延迟 对 象 都 会 向 其 他 代码 承诺 〈promise ) 提供 数据 。 这 个 承诺 以 另 一 个 对 象 的 形式 
来 兑现 ， 这 个 对 象 也 有 自己 的 一 套 方法 。 对 于 任何 延迟 对 象 ， 调 用 它 的 .promise() 方 法 就 可 以 
取得 其 承诺 对 象 。 然后 , 通过 调用 这 个 承诺 对 象 的 各 种 方法 ,就 可 以 添加 在 各 种 承诺 兑现 时 调用 


的 处 更 


程序 。 

















调用 。 





口 通过 .done() 方 法 添加 的 处 理 程序 会 在 延迟 对 象 被 成 功 解决 之 后 调用 。 
口 通过 .fail () 方 法 添加 的 处 理 程序 会 在 延迟 对 象 被 拒绝 之 后 调用 。 
口 通过 .always () 方 法 添加 的 处 理 程序 会 在 延迟 对 象 完成 其 任务 〈 无论 解决 或 拒绝 ) 时 








这 些 处 理 程序 与 我 们 提供 给 .on () 方 法 的 回调 函数 非常 相似 , 因为 它们 都 是 在 某 些 事件 发 生 
时 调用 的 函数 。 对 同一 个 承诺 , 也 可 以 添加 多 个 处 理 程序 , 这 些 处 理 程序 会 在 适当 的 时 候 被 调用 。 
不 过 , 这 些 处 理 程序 与 回调 函数 还 是 有 一 些 重要 的 区 别 。 承 诺 的 处 理 程序 只 会 被 调用 一 次 ， 因 为 
延迟 对 象 不 能 解决 两 次 。 而 且 ， 如 果 在 我 们 添加 承诺 处 理 程序 时 延迟 对 象 已 经 解决 , 那么 就 会 立 
即 调 用 这 个 处 理 程 序 。 

我 们 在 第 6 章 见 过 一 个 非常 简单 的 例子 ， 其 中 展示 了 jQuery 的 Ajax 系统 如 何 使 用 延迟 对 象 。 
接 下 来 ,我 们 就 通过 jQuery 动画 系统 为 我 们 创建 的 延迟 对 象 体 验 一 下 它 的 强大 之 处 。 























动画 承诺 
每 个 jQuery 集合 都 有 一 组 与 之 关联 的 延迟 对 象 ， 用 于 跟踪 集合 中 元 素 要 执行 的 各 种 操作 状 


态 。 通 过 在 jQuery 对 象 上 调用 .promise () 方 法 ， 可 以 得 到 一 个 队列 完成 后 被 解决 的 承诺 对 象 。 
特别 地 ， 我 们 可 以 使 用 这 个 承诺 对 象 在 匹配 元 素 上 的 所 有 动画 运行 完成 后 再 执行 某 项 操作 。 


就 像 show 


























Details() 函数 用 来 显示 成 员 的 名 字 和 地 点 信息 一 样 ， 可 以 再 写 一 个 showBio () 


函数 ， 把 每 个 人 的 简介 添加 到 页 面 中 。 首 先 ， 要 给 <boqy> 添 加 一 个 新 的 <aiv> ， 并 像 下 面 这 样 
添加 两 个 对 象 ， 参 见 代码 清单 11-9。 


代码 清单 11-9 





Var Smovable = $('<div id="movable"></div>') 
.appendTo('body'); 
var bioBaseStyles = { 


display: 'none', 


heioghts: "Sp" 
width: '25px' 


ys 
bioEffects = { 





duration: 800, 


easing: 'easeOutQuart', 





specialEasing: 


opacity: 'linear' 


} 


a 








新 添加 的 “movable”<div> 就 是 以 动画 形式 实际 显示 的 对 象 ， 当 然 还 得 给 它 添加 简介 文本 。 
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在 以 动画 形式 改变 元 素 的 宽度 和 高 度 的 情况 下 ， 创 建 这 样 一 个 包装 对 象 十 分 有 用 。 可 以 将 它 的 
overflow 属 性 设置 为 hidden, 并 给 其 中 的 简介 设置 明确 的 高 度 和 宽度 ,从 而 避免 在 直接 为 简介 
<div> 本 身 应 用 动画 时 会 带 来 的 文本 重 排 问题 

这 个 showBio () 函数 将 会 基于 被 单 击 的 成 员 来 确定 “movable”<div> 的 开始 及 结束 样式 。 
为 此 ， 我 们 使 用 $ .extena() 方 法 将 始终 保持 不 变 的 基本 样式 与 根据 不 同 成 员 位 置 变 化 的 top 和 
left 属 性 合并 在 一 起 。 人 然后， 就 是 使 用 .css () 来 设置 其 开始 样式 ， 再 使 用 .animate () 来 设置 
最 终 样式 了 ， 参 见 代码 清单 11-10。 


代码 清单 11-10 


function showBio() { 
Var S$Smember = $(this) .parent(), 
$sbio = $member.find('p.bio'), 
startStyles = $.extend(bioBaseStyles, S$member.offset()), 
endstyles = { 
width: S$bio.width(), 
top: $member.offset().top + 5, 
left: $member.width() + $member.offset().left - 5, 
opacity: ' Show' 
了 
smovable 
.html (Sbio.clone()) 
.css(startSstyles) 
.animate (endStyles, bioEffects) 
.animate({height: S$bio.height()}, {easing: 'easeOutQuart'}); 





























} 

这 里 连续 使 用 了 两 个 .animate() 方 法 ， 先 从 左 侧 把 简介 变 宽 变 得 完全 不 透明 ， 然 后 在 到 达 

指定 位 置 时 向 下 滑 出 整个 高 度 。 

第 4 章 曾 介绍 过 ，jQuery 动 画 方法 的 回调 函数 会 在 集合 中 每 个 元 素 的 动画 完成 之 后 被 调用 。 
现在 ， 我 们 想 在 其 他 <qiv> 元 素 出 现 之 后 再 显示 成 员 的 简介 。 这 要 是 在 jQuery 引入 .promise () 
方法 之 前 ， 就 是 一 个 非常 麻烦 的 任务 。 因 为 需要 在 每 次 执行 回调 函数 时 ， 都 要 倒 减 元 素 的 个 数 ， 
直至 最 后 一 次 执行 回调 函数 ， 然 后 才能 执行 简介 的 动画 代码 。 

而 现在 , 只 要 在 showpetails () 函数 中 简单 地 把 .promise() 和 .done () 方 法 连 缀 在 .each () 
方法 之 后 即 可 ， 参 见 代 码 清单 11-11。 


代码 清单 11-11 


function showDetails() { 

Var Smember = $ (this) .parent(); 

if (Smember.hasClass('active')) { 
return; 

} 

$smovable.fadeOut (); 

$s('div.member.active') 
.removeClass('active') 
.children('div').fadeOut(); 


























网 
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smember.addClass('active'); 


smember.find('div').css(t{ 
display: "block'", 
left: '-300px', 
top: 0 
}) .each (function(index) { 
s(this) .animatel({ 
left: 0, 
top: 25 * index 
Fz, 
duration: 'slow', 
specialEasing: { 
top: 'easeInQuart' 
} 
))3 





}) .promise() .done (showBio); 


和 


其 中 ，.done () 方 法 接收 一 个 showBio () 函数 的 引用 。 这 样 ,在 单 击 每 个 人 的 照片 时 ， 相 应 
的 信息 就 会 以 连续 动画 的 形式 显示 出 来 ， 如 图 11-5 所 示 。 

















John ls in charge of managing the direction of the jQuery 
lbrary. This Involves taking a critical look at existing (and 
expected) features and making informed decisions about 
them,. He's also In charge of maraglng development 
resources and time spent on the different aspects of the 
project. 








11-5 


注意 ,我 们 还 在 showDetails () 函数 代码 的 上 方 悄悄 地 加 入 了 一 行 Smovable.fadeout ()。 
这 行 代码 在 第 一 次 调用 showpetails () 函数 时 没有 什么 可 见 的 效果 ， 但 在 后 续 调 用 中 ， 它 能 








确保 在 显示 其 他 成 员 的 信息 之 前 ， 让 当前 可 见 的 简介 随同 其 他 信息 一 块 淡出 视图 。 


11.6 ”精细 地 控制 动画 


虽然 我 们 介绍 了 一 些 高 级 特性 , 但 jQuery 的 效果 模块 还 是 有 很 多 值得 探索 的 地 方 。 jQuery 1.8 


重 写 了 这 个 模块 之 后 ,又 给 高 级 开发 人 员 提 供 





了 一 些 精细 控制 各 种 效果 的 手段 , 甚至 可 以 让 我 们 


修改 底层 的 动画 引擎 。 比 如 ， 除 了 duration 和 easing 选 项 之 外 ，.animate() 方 法 还 提供 了 两 
个 回调 选项 ， 让 我 们 可 以 检视 和 修改 动画 的 每 一 步 : 
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$('#mydiv') .animate({ 
height: '200px', 
width: '400px' 
站 
step: function(now, tween) { 
/ /监控 高 度 和 宽度 ， 
/ /调整 补 间 属 性 
bs 
progress: function(animation, progress, remainingMs) { 
} 
用 


在 动画 过 程 中 ， 这 里 的 setup () 函数 大 约 每 13 毫 秒 会 针对 每 个 动画 属性 被 调用 一 次 。 这 样 ， 
我 们 就 可 以 调整 tween 对 象 的 属性 ， 比 如 终止 值 、 缓 动 类 型 ， 或 者 根据 传人 的 now 参 数 中 属性 的 
当前 值 修改 实际 的 动画 属性 。 一 个 复杂 一 些 的 例子 ,就 是 可 以 在 setup () 函数 中 对 两 个 运动 的 元 
素 进行 碰撞 检测 ， 然 后 调整 各 自 的 运动 轨迹 。 

类 似 地 ，progress () 函数 在 动画 生命 周期 中 也 会 被 多 次 调用 : 

口 它 与 setup () 的 区 别 在 于 ， 它 只 会 在 动画 的 每 一 步 针对 每 个 元 素 被 调用 一 次 ， 与 多 少 属 

性 产生 动画 效果 无 关 ; 

口 它 提供 了 动画 其 他 方面 的 调整 选项 ， 包 括 动画 的 承诺 对 象 、 进 度 (0 到 1 之 间 的 一 个 值 ) 
和 动画 剩余 的 毫秒 数 。 

jQuery 所 有 的 动画 都 使 用 JavaScript 的 计时 函数 setTimeout () 来 重复 调用 函数 。 默 认 间 隔 时 
间 为 13 毫 秒 , 每 次 调用 都 会 修改 样式 属性 的 值 。 不 过 ， 有 些 现代 浏览 器 支持 比 setTimeout () 更 
好 的 requestAnimationFrame () 函数 ， 使 用 这 个 函数 不 仅 控 制 更 精确 ( 因此 动画 也 更 平顺 )， 
而 且 在 移动 设备 上 还 能 节省 电量 消耗 。 

我 们 知道 ,不管 浏览 器 标签 页 是 否 活动 ，setTimeout() 始终 都 不 会 停止 运行 。 而 
requestAnimationFrame () 国 数 则 会 在 标签 页 不 可 见 的 时 候 和 暂停 执行 , 因而 更 省 电 。 领导 重 写 
jQuery 动画 的 Corey Frang 写 了 一 个 用 requestaAnimationFrame () 和 替代 setTimeout () 的 插件 
( 只 要 浏览 器 支持 就 替换 )。 这 个 插件 会 修改 $ .fx 对 象 的 两 个 方法 : .timer() 和 .stop()， 免费 
下 载 地 址 是 : https://github.com/gnarf/jquery-requestAnimationFrame。 




































































对 于 动画 而 言 ， 一 般 都 应 该 使 用 requestaAnimationFtrame() 替代 
setTimeout ()。 不过， 由 于 在 代码 中 同时 使 用 这 两 者 可 能 会 引发 冲突 , jQuery 


核心 库 并 没有 实现 requestAnimationFrame ()。 





jQuery 动画 系统 最 底层 的 方法 是 $ .Animation() 和 $ .Tween() 函数 。 这 两 个 函数 及 其 对 应 
的 对 象 可 以 用 来 调整 动画 的 每 个 可 能 的 方面 。 比 如 ， 可 以 使 用 $ .Animation () 来 创建 动画 滤 清 
器 (prefilter )。 像 下 面 这 个 滤 清 器 ， 就 会 在 动画 结束 时 根据 传人 .animate() 方 法 的 options 对 
象 中 是 否 存 在 某 个 属性 来 执行 一 个 特定 的 操作 : 


$.Animation.prefilter (function(element, properties, options) { 
if (options.removeAfter) { 
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this.done(function () { 
$s (element) .remove(); 
有 
} 
> 


有 了 这 段 代 码 ， 调 用 $ ('#my-div') .fadqeout ({removeAfter: truel ) 就 会 在 动画 完成 
并 淡出 后 自动 删除 DOM 中 的 <aiv>。 


11.7 ”小结 


本 章 我 们 进一步 探讨 了 在 设计 漂亮 的 动画 时 涉及 的 几 个 技巧 , 从 而 创建 出 用 户 满意 的 动画 效 
有 果 。 现在 , 我 们 知道 了 怎样 单独 控制 每 个 动画 属性 的 加 速 和 减速 ,甚至 在 必要 时 单独 地 或 全 面 地 
停止 动画 效果 。 讲 到 了 jQuery 效果 库 内 部 定义 的 几 个 属性 ， 以 及 如 何 更 改 这 些 属性 以 适应 我 们 的 
需求 。 本 章 还 介绍 了 jQuery 的 延迟 对 象 系统 ， 而 第 13 章 还 将 进一步 探讨 该 主题 。 最 后 ， 我 们 又 学 
习 了 jQuery 为 高 级 程序 员 提 供 的 精细 控制 动画 效果 的 手段 。 


























延伸 阅读 


要 了 解 有 关 选 择 符 与 遍历 方法 的 完整 介绍 ， 请 参考 本 书 附录 C 或 jQuery 官方 文档 : http://api. 
jquery.comy/。 


11.8 ”练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 

“挑战 ”练习 有 一 些 难度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : 
http://api.jquery.com/。 

(1) 定义 一 个 新 的 动画 速度 常量 zippy， 并 将 它 应 用 到 简历 的 显示 效果 中 。 

(2) 修改 成 员 信 息 水 平移 动 的 动画 效果 ， 让 相关 对 象 “ 弹 跳 ” 着 出 来 。 

(3) 再 给 承诺 ( promise ) 对 和 象 添加 一 个 延迟 回调 函数 ， 为 当前 成 员 的 位 置 <aiv> 添 加 一 个 

highlight 类 。 
(4) 挑战 : 在 简介 动画 运行 前 添加 两 秒 钟 的 时 间 延 迟 。 使 用 jQuery 的 .aelay () 方 法 。 
(5) 挑战 : 在 单 击 当 前 活动 照片 时 ， 折 著 个 人 信息 。 在 此 之 前 ， 先 停止 正在 运行 的 所 有 动画 。 














图 灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


高 级 DOM 操 作 








贯穿 全 书 , 我 们 一 直 都 在 使 用 jQuery 强大 的 DOM 操 作 方法 修改 文档 内 容 。 我 们 知道 了 向 文档 





中 插入 新 内 容 、 移 动 已 有 内 容 或 者 完全 删除 内 容 的 不 同方 法 , 也 知道 了 如 何 根 据 自 己 的 需要 修改 





元 素 的 属性 。 





这 些 技术 都 是 第 5 童 学 习 的 。 本 章 ， 我们 将 继续 探讨 jQuery 的 DOM 操 作 特 性 ， 接 触 几 种 更 高 


级 的 技术 : 

口 使 用 .append() 排 序 页 面 元 素 ; 

口 给 元 素 附 加 自 定 义 数据 ; 

口 读 取 HTML5 的 数据 属性 ; 

口 基于 JSON 数 据 创建 元 素 ; 

口 使 用 CSS 挂 钩 扩展 DOM 操 作 方 法 。 


12.1 排序 表格 行 











本 章 所 要 讨论 的 主要 内 容 可 以 通过 对 表格 行进 行 排 序 来 演示 说 明 。 对 表格 行进 行 排序 是 一 种 
非常 有 用 的 技巧 ， 可 以 帮助 用 户 迅速 找 到 他 们 想 找 的 信息 。 自 然 ， 实 现 排序 的 方式 也 不 止 一 种 。 


12.1.1 服务 器 端 排序 


在 服务 器 端 排序 数据 是 一 种 常见 的 方式 。 表 格 中 的 数据 经 常 来 自 数据 库 , 因而 在 取得 这 些 数 


据 时 ， 服 务 器 端 代码 可 以 按照 指定 顺序 来 取得 ( 例如 ， 使 用 SQL 语言 的 ORl 











DER 


们 有 修改 服务 器 端 代 码 的 权限 ， 那 么 以 一 个 合理 的 顺序 展示 数据 是 很 直观 的 。 

不 过 ,如 果 能 够 让 用 户 自己 来 排序 的 话 ， 那么 排序 功能 就 更 方便 了 。 为 此 ,经常 可 以 看 到 类 
似 下 面 的 用 户 界面 : 让 用 户 点 击 表 头 〈<th> ) 中 的 链接 来 按照 指定 的 列 排序 表格 数据 。 这 些 链 
接 都 指向 当前 页 面 ， 但 后 面 附加 的 查询 字符 串 则 用 来 表示 作为 排序 依据 的 列 : 





<table id="my-data"> 
<thead> 
区 七 天 汉 
<th class="name"> 
<a href="index.php?sort=name">Name</a> 
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</th> 
<th class="date"> 
<a href="index.php?sort=date">Date</a> 

</th> 
~ 

</thead> 
<tbody> 

</tbody> 
</table> 


服务 噩 在 接收 到 查询 字符 串 之 后 ， 会 根据 此 字符 串 从 数据 库 中 以 不 同 顺序 取得 内 容 。 





12.1.2 ”Ajax 排序 


服务 器 排序 的 页 面倒 是 简单 ， 但 每 次 排序 都 得 刷新 页 面 。 我 们 知道 ，jQuery 提 供 的 Ajax 方法 
可 以 帮 我 们 避免 页 面 刷 新 。 如 果 像 前 面 那样 设置 好 了 表 头 中 的 链接 ,那么 可 以 通过 jQuery 把 那些 
链接 转换 为 Ajax 请 求 ， 
$s(document) .ready (function() { 
$s('#my-data th a').click(function(event) { 
event .preventDefault(); 
$s('#my-data tbody').load($s (this) .attr('href')); 


jy 
3 


这 样 ， 再 单 击 链接 时 ，jQuery 会 向 同一 个 页 面 发 送 一 次 Ajax 请 求 。 在 jQuery 使 用 Ajax 问 一 个 
页 面 发 送 请 求 时 , 它 会 为 XMLHttpRequest 对 象 设置 值 Xx--Requested-With 的 HTTP 头 部 ,以 便服 
务 右 知道 到 来 的 是 一 次 Ajax 请 求 。 当 这 个 参数 存在 时 ， 服务器 端 代码 只 会 返回 <tbody> 元 素 自 身 
的 内 容 ， 而 不 是 返回 整个 页 面 。 这 样 ， 我 们 就 可 以 使 用 服务 器 的 响应 来 奉 换 现 有 <tbody> 元 素 的 
内 容 。 

实际 上 , 这 也 是 一 个 渐进 增强 的 例子 。 这 个 页 面 在 浏览 器 不 支持 JavaScript 的 情况 下 照样 能 够 
正常 运行 ， 因 为 服务 器 端 排序 的 链接 仍然 有 效 。 而 在 JavaScript 可 用 时 ，Ajax 就 会 拦截 页 面 请 求 ， 
实现 无 须 刷 新 整个 页 面 的 排序 功能 。 





























12.1.3 ” JavaScript 排序 


有 时 候 , 我 们 可 能 不 想 在 排序 的 时 候 等 待 服务 器 响应 ,或 者 根本 就 没有 服务 器 端 脚本 。 在 这 种 
情况 下 ， 可 行 的 方案 就 是 在 浏览 器 中 使 用 JavaScript 客 户 端 脚本 和 jQuery 的 DOM 操 作 方 法 来 排序 。 
为 了 演示 不 同 的 技术 ， 本 章 将 探讨 三 种 jQuery 排序 机 制 。 每 一 种 都 能 实现 相同 的 目标 ， 但 每 
一 种 技术 的 实现 方式 都 不 一 样 ， 包 括 : 
口 根据 从 HTML 内 容 中 提取 的 内 容 排 序 ; 
口 根据 HTML5 自 定义 数据 属性 排序 ; 
口 根据 表格 数据 的 JSON 表 示 排 序 。 
例子 中 使 用 的 表格 根据 相应 的 JavaScript 技 术 不 同 会 包含 不 同 的 HTML 结 构 , 但 总 地 来 说 , 它 
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们 都 包含 图 书 名 称 列 、 作 者 列 、 出 版 日 期 列 和 定价 列 。 第 一 个 表格 的 结构 很 简单 : 


<table id="t-1" class="sortable"> 
<thead> 
<tr> 
<th></th> 
<th class="sort-alpha">Title</th> 
<th class="sort-alpha">Author(s)</th> 
<th class="sort-date">Publish Date</th> 
<th class="sort-numeric">Price</th> 
过 臣 天 和 
</thead> 
<tbody> 
<tr> 
<td><img src="images/2862_0S.jpg" alt="Drupal 7"></td> 
<td>Drupal 7</td> 
<td>David <span class="sort-key">Mercer</span></td> 
<td>September 2010</td> 
<td>$44.99</td> 


</tr> 
<!-- 其 他 代码 --> 
</tbody> 
</table> 
下 载 示 例 代 码 


y 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 

a 档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这 些 示例 ， 可 以 从 以 下 地 址 下 载 完 整 的 示例 

代码 : Packt Publishing 网 站 http:/www.packtpub.com/support， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


在 使 用 JavaScript 增 强 这 个 表格 之 前 ,我们 先 来 看 看 它 前 儿 行 的 外 观 ， 如 图 12-1 所 示 。 








Titie Author(s) Publish Date Price 
, September 
Drupal 7 David Mercer 2010 $44.99 





Amazon SimpleDB: LITE Prabhakar Chaganti, 


ee Ns May 2011 $9.99 





Object-Oriented JavaScript Stoyan Stefanov July 2008 $39.99 














图 12-1 
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12.2 ”移动 和 插入 元 素 


在 随后 的 例子 中 ， 我 们 会 构建 一 种 灵活 的 排序 机 制 ， 能 够 实现 按 列 排序 。 为 此 ， 需 要 使 用 
jQuery 的 DOM 操 作 方法 向 表格 中 搬入 一 些 新 元 素 , 并 将 已 有 的 一 些 元 素 移动 到 其 他 地 方 。 下 面 我 
们 就 从 最 简单 的 地 方 着 手 一 一 为 表 头 加 链接 。 





12.2.1 为 已 有 的 文本 添加 链接 


我 们 先 为 表 头 中 的 文本 加 上 链接 ， 以 便 触 发 根据 各 自 列 排序 的 操作 。 第 5 章 曾 介绍 过 jQuery 
的 .wrapInner () 方 法 ,这 个 方法 会 把 一 个 新 元 素 ( 在 这 里 就 是 <a> 元 素 ) 放 到 匹配 元 素 的 内 部 ， 
同时 包含 匹配 元 素 的 子 元 素 ， 因 此 我 们 可 以 使 用 个 方法 ， 参 见 代码 清单 12-1。 








代码 清单 12-1 


$s(document) .ready (function() { 
Var S$tablel = $('#t-1'); 
Var Sheaders = S$tablel.find('thead th').slice(1); 
Sheaders 
.wrapInner('<a href="#"></a>') 
.addClass('sort'); 
3 


首先 (使 用 .slice() 方 法 ) 跳 过 每 个 表格 的 第 一 个 <th> 元 素 ， 因 为 这 个 表 头 中 不 包含 任何 
文本 , 同时 也 没有 必要 为 封面 图 片 加 标签 或 排序 。 我 们 已 经 给 其 他 表 头 ( <th> ) 元 素 添 加 了 sort 
类 ， 以 便 通 过 CSS 来 区 分 不 可 以 用 来 排序 的 表 头 。 现 在 表 头 行 的 外 观 如 图 12-2 所 示 。 























< Titie $ Author(s) 人 Publish Date $$ Price 
Drupal 7 David Mercer September 2010 $44.99 
2 。 Prabhakar Chaganti, 
pp Amazon SimpleDB: LITE Rich Helms May 2011 $9.99 
mr 一 一 :一 
国 Object-Oriented JavaScript Stoyan Stefanov July 2008 $39.99 
图 12-2 
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这 里 也 是 渐进 增强 的 对 立 面 一 一 优雅 降级 的 一 个 例子 。 与 前 面 讨论 的 Ajax 方 案 不 同 , 现在 这 
个 例子 如 果 没 有 JavaScript 是 不 能 发 挥 作用 的 ; 我 们 假设 了 服务 器 端 没 有 脚本 可 用 。 因 为 必须 有 
JavaScript 才 能 实现 排序 ， 所 以 我 们 只 通过 代码 来 给 这 些 链接 添加 sort 类 ; 这 意味 着 ， 只 有 在 浏 
览 器 支持 JavaScript 的 情况 下 ， 界 面 中 才 会 显示 可 以 排序 的 提示 。 而 且 ， 由 于 给 文本 添加 了 链接 ， 
并 没有 仅仅 通过 添加 视觉 样式 来 表明 可 以 单 击 表 头 ， 所 以 那些 使 用 键盘 的 用 户 还 可 以 〈 通 过 按 
Tab 键 ) 在 这 些 表 头 间 切 换 。 最 终 ， 即 使 不 能 实现 排序 ， 页 面 也 将 退化 为 可 以 使 用 。 

















12.2.2 ”简单 的 JavaScript 数 组 排序 


要 进行 这 种 排序 , 可 以 利用 JavaScript 内 置 的 .sort () 方 法 。 这 个 方法 会 对 数组 元 素 进 行 就 地 
排序 ， 可 以 接受 一 个 比较 函数 作为 参数 。 这 个 比较 函数 比较 数组 中 的 两 个 元 素 , 根据 哪个 元 素 应 
该 在 排序 后 的 数组 中 排 在 前 面 返 回 正 值 或 负 值 。 

比如 ， 以 下 面 这 个 简单 的 数值 数组 为 例 : 

Var arr = [52; 97; 37 6€2, .10; 6€3; 6€4,; 1; 9 37 4]: 

调用 arr .sort () 可 以 对 这 个 数组 进行 排序 。 排 序 之 后 得 到 的 数组 如 下 : 

[1, 10;, 3, 3, 4 52, 62, €3; 64, 9 :97] 

我 们 注意 到 ， 这 个 方法 在 默认 情况 下 是 按照 字母 表 顺 序 排序 的 。 实 际 上 ， 对 于 数值 数组 还 是 
按照 数值 大 小 排序 才 有 意义 。 为 此 ， 可 以 给 .sort () 方 法 传人 一 个 比较 函数 : 

arr.sort (function(a,b) { 

站 (a < BB) 1 
return -1; 

} 

if (a > b) { 
return 1; 

} 


return 0; 


}); 

在 排序 后 的 数组 中 ， 如 果 a 应 该 排 在 前 头 ， 这 个 函数 返回 -1; 如 果 b 应 该 排 在 前 头 ， 这 个 函 
数 返回 1; 如 果 两 个 元 素 谁 排 在 前 头 都 可 以 , 则 返回 0。 设置 好 了 排序 规则 之 后 ，. sort () 方 法 就 
可 以 给 出 适当 的 排序 了 : 

Ll Bo 3 dy 0 B52 G2 3 GE 9 


稍 后 我 们 会 对 表格 行 应 用 .sort () 方 法 。 


























12.2.3 ”对 DOM 元 素 排 序 


下 面 我 们 再 来 看 一 看 如 何 对 表格 的 Title ( 书 名 ) 列 进行 排序 。 请 注意 ,虽然 前 面 给 这 个 列 和 
其 他 表 头 列 添加 了 sort 类 , 但 这 个 列 本 身 的 HTML 代 码 中 还 有 一 个 sort-alpha 类 。 其 他 表 头 单 
元 格 中 也 根据 排序 方式 不 同 添加 了 相似 的 类 名 。 不 过 ,这 里 移 只 关注 Tite 表 头 单 元 格 ， 这 一 列 需 
要 按照 字母 顺序 排序 ， 参 见 代 码 清单 12-2。 
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代码 清单 12-2 


Sheadqers .on( 
event .PEeV 
Var column = 
Var rows = $ 
上 OWS .sor 

Var keyA 


'click', function(event) { 
entDefault(); 

$s (this) .index(); 
tablel.find('tbody > tr').get(); 
t(functionm(a; HB) 

= $(a).children('td') .eq(column) .text(); 


keyA = $.trim(keyA) .toUpperCase(); 


Var keyB = $ 
keyB = $ 
if (keyA 
if (keyA 
return 0 


js 


$ .each (row 
Stablel . 
)93 
3 各 


(b) .children('td') .eq(column) .text (); 
.trim(keyB) .toUpperCase(); 

< keyB) return -1; 

> keyB) return 1; 


’ 


s, function(index, row) { 
children('tbody') .append (row); 





在 找到 被 单 击 的 表 头 单元 格 的 索引 之 后 , 取得 了 包含 所 有 数据 行 的 数组 ,这 也 是 使 用 .get () 


方法 将 jQuery 对 象 转换 为 DOM 节 点 数组 的 一 个 绝 好 的 例子 。 之 所 以 要 这 样 做 ,是 因为 jQuery 对 象 
本 身 虽 然 与 数组 类 似 ,但 它 却 没有 .pop () 或 .shift () 等 原生 的 数组 方法 。 


jQuery 内 部 确实 定义 了 一 些 与 原生 数组 方法 类 似 的 方法 。 例 


如 ，. 


sort()、.push() 和 .splice() 都 是 jQuery 对 象 的 方法 。 


不 过 ， 这 些 方法 


码 中 也 可 以 像 使 用 原生 方法 那样 得 到 预期 的 结果 。 总 之 ， 不 能 在 jQuery 对 象 上 调 
用 它们 。 


区 都 是 内 部 使 用 的 ,并 没有 在 文档 中 公开 出 来 。 我 们 不 能 依赖 这 些 方法 在 自己 的 代 


在 取得 DOMT 点 数组 之 后 ,就 可 以 对 它们 排序 了 。 不 过 , 我 们 得 为 此 写 一 个 适当 的 比较 函 
数 。 因 为 要 根据 相关 单元 格 中 的 文本 内 容 来 对 表格 行进 行 排序 ， 所 以 比较 函数 要 比较 的 就 是 这 








些 文本 内 容 。 通 过 调用 .inaex () 方 法 返回 的 列 索引 ， 我 们 知道 应 该 查找 盟 
) 方 法 删 掉 文本 内 容 前 后 的 空格 ， 之 后 再 将 它们 转换 成 全 部 大 写 ， 是 因为 


jQuery 的 $ .trim 























个 单元 格 。 而 使 用 





JavaScript 对 字符 串 的 比较 区 分 大 小 写 ， 而 我 们 想 做 到 不 区 分 大 小 写 。 为 了 减少 多 余 的 计算 , 我 
们 把 转换 好 的 字符 串 保存 在 变量 中 ， 比 较 它们 ,然后 就 像 我 们 前 面 排序 数组 时 一 样 返 回 正 值 或 
负 值 。 


对 DOM 节 点 的 排序 完成 了 ， 但 节点 调用 . sort () 并 没有 改变 DOM。 要 把 排序 结果 反映 在 表 
格 中 ， 需 要 调用 DOM 操 作 方 法 移动 原来 的 表格 行 。 接 下 来 的 代码 遍历 排序 后 的 每 一 行 ， 每 次 重 
新 插入 一 行 。 因 为 . append () 方 法 不 会 复制 节点 ,所 以 移动 它们 不 会 产生 多 余 的 副本 。 好 了 , 现 
在 表格 行 的 排序 完成 了 ， 效 果 如 图 12-3 所 示 。 
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仿 Title $$ Author(s) $ Publish Date $$ Price 
s Prabhakar Chaganti, 

Mearsca nt AMazon SimpleDB: LITE Rich Helms May 2011 $9.99 

一 二 一 二 一 > 
CakePHP 1.3 Application 3 

莫 Development Cookbook Mariano Iglesias March 2011 $39.99 
Cocoa and Objective-C , 

区 Cookbook Jeff Hawkins May 2011 $39.99 
图 12-3 





12.3 在 DOM 元 素 中 保存 数据 


前 面 的 代码 运行 正常 , 但 速度 太 慢 。 其 中 的 罪魁 祸首 就 是 比较 函数 ,这 个 函数 进行 了 相当 可 
观 的 计算 。 可 想 而 知 ,在 整个 排序 过 程 中 会 多 次 调用 比较 函数 ,而 这 就 意味 着 花 在 处 理 上 的 额外 
时 间 会 不 断 累 积 。 





数组 排序 的 性 能 
w JavaScript 实 际 使 用 的 排序 算法 在 标准 中 没有 定义 。 因 此 ， 有 可 能 是 一 种 简 
ea 单 的 冒 泡 排序 ( 在 复杂 计算 情况 下 的 最 坏 运行 时 间 为 90i2) ), 或 者 一 种 更 完善 的 
排序 ， 如 快速 排序 (平均 运行 时 间 为 9(n logn) )。 但 无 论 使 用 哪 种 排序 算法 ， 如 
果 排 序 的 项 增加 一 倍 ， 那 么 调用 比较 器 函数 的 次 数 则 不 仅仅 是 增加 一 信 。 





要 解决 比较 函数 造成 的 排序 速度 慢 的 问题 ,就 需要 预先 计算 要 比较 的 关键 字 。 换 句 话 说 ,可 
以 在 一 开始 的 循环 中 完成 大 部 分 费时 的 工作 ， 并 使 用 jQuery 的 .qata() 方 法 (用 于 设置 和 取得 与 
页 面 元 素 相关 的 任意 信息 ) 把 计算 结果 保存 起 来 。 之后， 只 要 在 比较 函数 中 比较 这 些 关 键 字 就 可 
以 了 ， 而 排序 速度 也 可 以 明显 提高 ， 如 代码 清单 12-3 所 示 。 





代码 清单 12-3 


Sheaders.on('click', function(event) { 
event .preventDefault(); 
Var column = $ (this).index(); 
Var rows = S$tablel.find('tbody > tr').each(function() { 
var key = $(this).children('td') .eq(column) .text(); 
$s(this) .data('sortKey', $.trim(key) .toUpperCase()); 


网 
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}) .get(); 
rows.sort(function(a, b) { 

Var keyA = $(a) .data('sortKey'); 

Var keyB = $(b) .data('sortKey'); 

if (keyA < keyB) return -1; 

if (keyA > keyB) return 1; 

return 0; 
上 
$.each(rows, function(index, row) { 
$stablel.children('tbody') .append (row); 
3 
六 


这 里 的 .qata() 方 法 ， 再 加 上 对 应 的 .removeData () 方 法 所 提供 的 数据 存储 机 制 ， 可 以 非 
常 方便 地 替代 所 谓 的 扩展 属性 (expando property ) 或 其 他 直接 添加 给 DOM 元 素 的 非 标准 属性 。 
使 用 .aata() 而 不 是 扩展 属性 可 以 避免 在 IE 早期 版 本 中 导致 内 存 泄漏 。 




















i 



































12.3.1 执行 预先 计算 


现在 , 我 们 打算 对 表格 中 的 Author(s) ( 作者 ) 列 也 执行 相同 的 排序 。 因 为 这 一 列 的 表 头 单元 
格 有 一 个 sort-alpha 类 , 所 以 利用 现 有 的 代码 就 可 以 实现 按照 该 列 排序 。 不 过 , 理想 的 情况 下 ， 
对 作者 应 该 按照 姓 而 不 是 按照 名 来 排序 。 而 有 的 书 又 有 多 个 作者 , 某 些 作者 还 有 中 名 或 者 使 用 缩 
写 的 名 字 。 因 此 ， 需 要 通过 额外 的 标识 来 确定 以 文本 中 的 哪 一 部 分 作为 排序 关键 字 。 为 此 ， 可 以 
通过 将 单元 格 中 的 部 分 文本 包装 在 一 个 标签 中 来 提供 这 种 标识 : 

<td>David <span class="sort-key">Mercer</span></td> 


这 样 ， 我 们 必须 修改 排序 代码 ， 将 这 个 作为 标识 的 标签 考虑 在 内 ， 同 时 还 要 确保 不 会 干扰 
Title 列 的 排序 行为 (该 列 的 排序 很 正常 )。 通 过 把 标签 中 的 排序 关键 字 放 到 以 前 计算 的 关键 字 
前 头 ， 可 以 实现 以 按 姓 排 序 为 主 ， 以 按 单元 格 中 的 整个 字符 串 排序 为 辅 的 操作 ， 参 见 代码 清 
单 12-4。 


代码 清单 12-4 


Var rows = S$tablel.find('tbody > tr').each(function() { 
var S$cell = $(this) .children('td') .eq(column); 
Var key = S$cell.find('span.sort-key') .text() + ' 
















































































key += $.trim($cell.text()).toUpperCase(); 
s(this) .data('sortKey', key); 
}) -et() 3 


按照 作者 列 排序 的 依据 就 是 使 用 已 有 的 关键 字 ， 即 作者 的 姓 ， 如 图 12-4 所 示 。 
如 果 两 个 作者 的 姓氏 相同 ， 那 么 就 以 整个 字符 串 作 为 最 终 排 定 位 次 的 依据 。 
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人 Title 今 norte) $ Publish Date $$ Price 
WordPress 3 Plugin Brian Bondari, 
Development Essentials Everett Griffiths March 2011 $39.99 
Maganto 1.4 Themes Richard Carter January 2011 $39.99 
Design 

, Prabhakar Chaganti, 
Amazon SimpleDB: LITE Rich Helms May 2011 $9.99 

图 12-4 





12.3.2 ”存储 非 字 符 串 数据 


我 们 的 排序 代码 应 该 不 仅 能 够 处 理 Title 列 和 Author(s) 列 ， 而 且 也 应 该 能 够 处 理 Publish Dates 
列 和 Price 列 。 由 于 已 经 改进 了 比较 器 函数 ， 它 能 够 处 理 各 种 数据 ,但 是 对 于 其 他 数据 类 型 ， 则 首 
先 需 要 调整 计算 的 排序 关键 字 。 例 如 ， 需 要 去 掉价 格 中 前 导 的 $ 字 符 ， 然 后 解析 出 剩余 的 数字 ， 
最 后 再 进行 比较 : 

Var key = parseFloat ($cell.text() .replace(/^[^\d.]*/, '')); 

if (isNaN(key)) { 

key = 0; 

} 

这 里 使 用 的 正则 表达 式 用 于 移 除非 数字 和 小数点 的 前 导 字 符 , 然后 把 结果 传 给 parseFloat () 。 
之 所 以 要 对 parseFloat () 返 回 的 结果 进行 检查 ,是 因为 如 果 不 能 从 文本 中 解析 出 数字 ， 该 函数 
就 会 返回 NaN， 而 这 将 会 对 . sort () 函数 造成 严重 破坏 ， 所 以 需要 将 任何 非 数值 设置 为 0。 

对 于 出 版 日 期 单元 格 ， 可 以 使 用 JavaScript 的 Date 对象 : 

Var key = Date.parse('1 ' + S$cell.text()); 

表格 中 的 日 期 只 包含 月 和 年 , 但 Date .parse() 方 法 需要 一 个 完整 的 日 期 因此 我 们 前 置 了 
一 个 1， 以 便 补足 月 和 年 前 面 的 日 (“september 2010” 会 变 成 “1 september 2010”)。 最后， 
组 合 的 日 期 将 被 转换 为 时 间 惟 ， 时 间 戳 可 以 使 用 正常 的 比较 函数 进行 排序 。 

我 们 将 以 上 表达 式 分 别 放 在 3 个 不 同 的 函数 里 , 再 基于 应 用 到 表格 标题 的 类 调用 适当 的 函数 ， 
参见 代码 清单 12-5。 


代码 清单 12-5 


$sheaders 
.each (function() { 
Var keyType = this.className.replace(/^sort-/,''); 
s(this) .data('keyType', keyType); 
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)) 
.wrapInner('<a href="#"></a>') 
.addClass('sort'); 
var sortKeys = { 
alpha: function(S$cell) { 
Var key = S$cell.find('span.sort-key') .text() + ' 
key += $ .trim($cell.text()).toUpperCase(); 
return key; 
js 
numeric: function($cell) { 
var num = $cell.text() .replace(/^[^\d.]*/, ''); 
Var key = parseFloat (num); 
if (isNaN(key)) { 
key = 0; 
} 
return key; 
js 
date: function($cell) { 
Var key = Date.parse('1 ' + Scell.text()); 
return key; 
} 





这 里 修改 了 一 下 脚本 , 在 添加 sort 类 之 前 , 先 根据 每 个 类 表 头 单元 格 的 类 名 保存 了 keyType 





数据 。 通 过 删除 类 名 中 的 sort- 部 分 ， 得 到 了 alpha、numeric 或 date。 通 过 在 sortKeys 对 象 
中 为 每 个 排序 函数 定义 一 个 方法 ,就 可 在 通过 数组 表示 法 并 传人 表 头 单元 格 的 keyType 数 据 ， 以 














调用 相应 的 函数 。 


























我 们 在 调用 方法 时 一 般 都 使 用 点 操作 符 。 实 际 上 ,本 书 在 调用 jQuery 对 象 的 方法 时 一 直 都 是 
使 用 点 操作 符 。 比 如 ， 要 给 <div class="foo"> 添 加 bar 类 ， 我 们 写成 S('aiv.foo') . 


addclass ('bar')。 因 为 JavaScript 支 持 以 点 操作 符 或 数组 表示 法 来 访问 





属性 和 方法 ， 所 以 刚才 


的 代码 也 可 以 写成 $('div.foo')['addclass']('bar')。 多数 情 况 下 ， 改 写成 这 样 也 没有 什 
么 意义 。 但 是 , 在 需要 根据 条 件 调用 不 同 的 方法 而 又 不 想 使 用 一 堆 if 语 句 的 情况 下 , 这 种 数组 表 
示 法 就 极其 有 用 了 。 对 于 刚刚 定义 的 sortKeys 对 象 而 言 ， 要 访问 其 中 的 alpha 方 法 可 以 使 用 
sortKeys .alpbpha(scel1l1) 或 sortKeys['alpha'](scel1)。 如 果 是 将 方法 名 保存 在 keyType 
变量 中 ， 则 可 以 写成 sortKeys [keyType] (scel1) 。 下 面 ， 我 们 就 会 在 click 处 理 程序 中 使 用 

















第 三 种 访问 方式 ， 参 见 代 码 清单 12-6。 


代码 清单 12-6 


Sheaders.on('click', function(event) { 

event .preventDefault(); 

var S$header = $(this), 
column = S$header.index(), 
keyType = $header.data('keyType'); 

if ( !$.isFunction(sortKeys[keyType]) ) { 

return; 
} 
Var rows = S$tablel.find('tbody > tr') .each (function() 


网 
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var S$cell = S$(this) .childqren('td').eq(column) ; 
s(this) .data('sortKey', SortKeys [keyType]l ($cell)); 
}) .get (); 
rows.sort(function(a, b) { 
Var keyA = $(a) .datal('sortKey'); 
Var keyB = $(b).data('sortKey'); 
if (keyA < keyB) return -1; 
if (keyA > keyB) return 1; 
return 0; 
}) 3 
$s.each(rows, function(index, row) { 
stablel.children('tbody') .append (row); 
}); 
了 


为 了 确保 代码 可 靠 执 行 ， 避 免 JavaScript 错 误 , 我 们 还 检测 了 sortKeys [keyType] 方 法 是 否 
存在 。 这 样 ， 就 实现 了 按照 出 版 日 期 和 定价 列 排序 表格 行 ， 如 图 12-5 所 示 。 


人 Title $ Author(s) 令 Pi en Date 3$ Price 





Object-Oriented JavaScript Stoyan Stefanov July 2008 $39.99 


Karl Swedberg, 


Jonathan Chaffer January 2010 $39.99 


jQuery 1.4 Reference Guide 





Drupal 7 David Mercer September 2010 $44.99 

















图 12-5 


12.3.3 ”变换 排序 方向 


与 排序 有 关 的 最 后 一 项 增强 ， 是 实现 既 能 够 按 升序 ( ascending ) 排序 也 能 够 按 降 序 
( descending ) 排序 。 换 句 话 说, 当 用 户 单 击 一 个 已 经 排序 的 表格 列 时 , 应 该 反 转 当前 的 排序 次 序 。 
要 反 转 当前 的 排序 , 我 们 所 要 做 的 就 是 逆转 由 比较 函数 返回 的 值 。 为 此 ， 只 需要 使 用 一 个 简 


单 的 sortDirection 变 量 即 可 








if (keyA < keyB) return -sortDirection; 
if (keyA > keyB) return sortDirection; 
return 0; 


如 果 sortDirection 等 于 1, 那么 排序 结果 同 以 前 一 样 。 如 果 它 等 于 -1, 则 排序 方向 会 反 转 。 
明白 了 这 一 点 , 再 辅 之 以 一 些 类 来 跟踪 某 一 列 当 前 的 排序 方向 ,实现 变换 排序 方向 就 不 难 了 , 参 
见 代码 清单 12-7。 











网 
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代码 清单 12-7 


Sheaders.on('click', function(event) { 
event .preventDefault(); 
Var Sheader = $ (this), 
column = S$header.index(), 
keyType = S$header.data('keyType'), 
sortDirection = 1; 

If ( !$.isFunction(sortKeys[keyType]) ) { 
Feturns 

} 

if ($header.hasClass('sorted-asc')) { 
sortDirection = -1; 

} 

Var rows = S$tablel.find('tbody > tr') .each(function() { 
var Scell = $(this) .children('td') .eq(column); 
s(this) .data('sortKey', sortKeys[keyTypel] ($cell)); 

}) -get();} 

rows.sort(function(a, b) { 

Var keyA = $(a) .datal('sortKey'); 
Var keyB = $(b).data('sortKey'); 


if (keyA < keyB) return -sortDirection; 
if (keyA > keyB) return sortDirection; 
return 0; 


局 用 

$headers.removeClass('sorted-asc sorted-desc'); 

$sheader .addClass (sortDirection == ? 'sorted-asc' : 'sorted-desc'); 

$s.each(rows, function(index, row) { 

$stablel.children('tbody') .append (row); 

})3 
0 

了 


由 于 我 们 使 用 类 来 保存 排序 方向 ， 所 以 还 可 以 通过 给 表格 添加 样式 来 表明 当前 排序 的 方式 ， 
如 图 12-6 所 示 。 




















人 Titie $ Author(s) 今 Publish Date ~ Price 
下 
, . Prabhakar Chaganti, 
i Taz0N SimpleDB: LITE Rich Helms May 2011 $9.99 
Object-Oriented JavaScript Stoyan Stefanov July 2008 $39.99 
, 和 Karl Swedberg, 
医 jQuery 1.4 Reference Guide Jonathan Chaffer January 2010 $39.99 
图 12-6 
生灵 
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12.4 使 用 HTML5 自 定义 数据 属性 


到 目前 为 止 ， 我 们 一 直 在 使 用 表格 中 单元 格 的 内 容 来 确定 排序 的 方式 。 虽 然 通过 苦心 设计 ， 
已 经 实现 了 根据 内 容 对 表格 行进 行 正 确 的 排序 , 但 通过 让 服务 需 输 出 带 有 HTML5 aata-* 属 性 的 
HIML， 可 以 让 代码 更 加 有 效 。 我 们 例子 中 用 到 的 第 二 个 表格 包含 如 下 属性 : 


<table id="t-2" class="sortable"> 


<thead> 
<tr> 
<th></th> 
<th data-sort='{"key": 


<th data-sort='{"key":" 
"publishedYM"}'>Publish Date</th> 
"price"}'>Price</th> 


<th data-sort='{"key": 
<th data-sort='{"key": 
</tr> 
</thead> 
<tbody> 








"title"}'>Title</th> 


authors"}'>Author(s)</th> 


<tr data-book='{"img":"2862_0S.jpg", 


td>Drupal 7</td> 
td>David Mercer</td> 


和 人 人 AAA 





<td>$44.99</td> 
</tr> 
<!-- Code continues --> 
</tbody> 
</table> 








"title":"DRUPAL 7","authors":"MERCER DAVID", 
"published":"September 2010","price":44.99, 
"publishedYyM":"2010-09"}'> 

td><img src="images/2862_0S.jpg" alt="Drupal 7"></td> 





td>September 2010</td> 


注意 ， 除 第 一 个 之 外 的 其 他 <th> 元 素 ， 现 在 都 包含 data-sort 属 性 ; 而 每 个 <tr> 元 素 则 都 
包含 data-book 属 性 。 我 们 最 早 介绍 自 定义 数据 属性 是 在 第 7 章 ， 当 时 是 通过 这 种 属性 为 插件 提 
供 数据 。 而 在 这 里 ,我们 要 使 用 jQuery 取得 这 些 属性 的 值 。 为 取得 这 些 属 性 ,需要 把 属性 名 中 data- 
之 后 的 部 分 传 给 .data() 方 法 。 例 如 ,s('th') .first() .data('sort') 就 是 要 取得 第 一 个 <th> 





元 素 的 daata-sort 属 性 。 





在 通过 .qata() 方 法 取得 数据 属 














性 的 值 时 ，jQuery 会 视 情 况 把 相应 的 值 转换 成 数值 、 数 组 、 对 











象 、 布 尔 值 或 nu11。 为 了 让 jQuery 把 数据 属性 的 值 转换 为 对 象 ， 属 性 值 字符 串 必须 使 用 有 效 的 
JSON 格 式 。 为 此 ， 要 把 数据 属性 的 值 放 在 单 引 号 中 ， 而 把 每 个 键 和 字符 串 值 放 在 双 引 号 中 : 
<th data-sort='{"key":"title"}'> 


由 于 jQuery 会 把 这 个 JSON 字 符 串 转换 成 对 象 , 因此 取得 其 中 的 值 就 很 简单 了 。 比 如 , 要 取得 











key 属 性 的 值 ， 可 以 这 样 写 : 

















$s('th').first().data('sort') .key 





在 以 这 种 方式 取得 了 自 定义 属性 的 值 之 后 ， 相 应 的 数据 就 会 被 jQuery 在 内 部 保存 起 来 ,不 会 





再 访问 或 修改 相应 HTML 的 aata-* 








属性 了 。 
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使 用 像 这 里 这 样 的 数据 








期 的 格式 以 及 把 价格 转换 为 数值 ， 都 已 经 被 处 理 好 了 。 


序 代码 ， 


参见 代码 清单 12-8。 


代码 清单 12-8 


$ (document ). 
var Stable2 = $(' 
Var Sheaders = 


ready (function() { 
#t-2°'); 


stable2.find('thead th') 


sheaders 


Var rows = 
Sheaders .on( 


.wrapInner('<a href="#"></a>') 
.addClass('sort'); 
stable2.find('tbody > tr') 
'click', function(event) { 
event .preventDefault(); 
Var Sheader = $ (this), 
sortKey = S$header.data('sort').key, 
SortDirection = 1 
($Sheader.hasClass('sorted-asc')) { 
sortDirection = -1; 
} 


rows.sort(function(a, b) { 


if 


Var keyRA = $(a) .data('book') [sortKey]; 
Var keyB = $(b).data('book') [sortKey]; 
if (keyA < keyB) return -sortDirection; 
if (keyA > keyB) return sortDirection; 
return 0; 


] 

Sheaders .removeC1lass ( 

Ssheader.addClass (sortDirection == 1 ? 

$.each(rows, function(index, row) { 
$stable2.children('tbody') .append (row); 

JJ 


5 


了 


这 种 方法 简单 而 直观 : 
量 去 比较 $ (a) 
在 调用 sort 滑 数 之 前 不 必 首 先 遍 历 每 一 
是 显而易见 的 。 这 

















12.5 




















.data('book') [sortKey] 和 s (b) 








种 简单 加 上 高 


使 用 JSON 排序 和 构建 行 


属性 的 一 个 最 大 好 处 是 , 这 些 值 可 以 输出 为 不 同 于 表格 单元 格 内 容 的 
形式 。 换 句 话 说， 我 们 对 前 面 第 一 个 表格 所 做 的 细节 处 再 


一 一 把 字符 串 转 换 为 全 部 大 写 、 改 变 日 





这 样 , 我 们 就 可 以 写 出 更 简洁 、 


get(); 


通过 Sheaaqer .data('sort'， 





高 效 的 排 


.Slice(1); 


'sorted-asc sorted-desc'); 
'sorted-asc' 


'sorted-desc'); 


) .key 取 得 sortKey， 然 后 利用 这 个 变 


.data('book') [sortKey]。o 这 样 做 ， 由 于 
行 并 调用 sortKeys 中 保存 的 一 
效率 ， 同 时 也 造就 了 代码 的 高 性 能 和 容易 维护 。 


个 函数 , 所 以 效率 的 提升 


迄今 为 止 ,我 们 一 直 围 绕 着 让 服务 器 端 输出 更 多 的 HTML ， 以 方便 客户 端 脚本 更 简洁 和 更 高 
效 。 现 在 , 来 考虑 一 种 不 同 的 情况 : 在 JavaScript 可 用 的 情况 下 显示 一 组 全 新 的 信息 。 越 来 越 多 成 
熟 的 Web 应 用 依赖 于 JavaScript 提 供 内 容 , 同时 也 依赖 它 操作 内 容 。 在 本 章 第 三 个 表格 排序 的 例子 
中 ,我 们 也 会 实现 相同 的 功能 。 首 先 ， 我 们 来 编写 两 个 油 数 ; puilgRow () 和 buildRows () 。 前 
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者 用 于 构建 表格 中 的 一 行 , 后 者 使 用 $ .map () 循环 遍历 数据 集中 的 所 有 行 , 在 每 一 行 数 据 上 调用 
buildRow() ， 如 代码 清单 12-9 所 示 。 


代码 清单 12-9 


function buildRow(row) { 
Var authors = []; 


$s.each(row.authors, function(index, auth) { 


authors[index] = auth.first name + ' ' + auth.last name; 
}) 
var html = ‘<tr>'y 
html += '<td><img src="images/' + row.img + '"></td>'; 
html += '<td>' + row.title + '</td>'; 
html += '<tqd>" + authors.join(', ') + '</td>'; 


html += '<td>' + row.published + '</td>'; 
html] += '<td>$' + row.price + '</td>'; 


html += ‘</tr>'; 
return html; 
} 


function buildRows (rows) { 


Var allRows = $.map (rows, buildRow); 


return allRows.join(''); 


} 


虽然 这 里 用 一 个 函数 也 可 以 达到 相同 的 目的 , 但 使 用 两 个 独立 的 函数 则 可 以 方便 我 们 在 某 个 
时 刻 单独 地 构建 和 插入 一 个 表格 行 。 这 两 个 函数 会 从 一 次 Ajax 请 求 的 响应 取得 数据 ,如 代码 清单 


12-10 所 示 : 


代码 清单 12-10 


$.getJSON('books.json', function(json) { 
$s (document) .ready (function() { 


var S$table3 = $('#t-3' 
stable3.find('tbody'). 
}) 
}); 


上 
html (buildRows (json) ) ; 





关于 这 段 代 码 ， 有 几 个 地 方 需要 说 明 一 下 。 首 先 ， 这 两 个 函数 是 在 $ (document) .ready () 
外 部 定义 的 。 通过 等 待 $.getJSON() 的 回调 函数 调用 $ (document) .ready(), 可 以 让 部 分 代码 


不 必 依 赖 于 DOM 而 提前 执行 。 

















其 次 , 值得 一 提 的 是 authors 数 据 。 这 个 数据 项 从 服务 器 返回 时 是 一 个 对 象 的 数组 , 每 个 对 象 


都 市 有 first_name 和 1last_name 





属性 。 而 其 他 数据 项 则 不 是 字符 串 就 是 数值 。 通 过 循环 authors 


数组 (尽管 大 多 数 行 的 这 个 数组 中 只 有 一 个 对 象 ) 拼接 起 了 作者 的 名 和 姓 。 而 在 $.each () 循环 后 
面 ， 又 将 生成 的 数组 的 值 通过 一 个 逗号 和 一 个 空格 连接 起 来 ， 得 到 了 一 个 格式 规范 的 名 字 列 表 。 

buildRow() 函数 假设 从 JSON 文 件 取 得 的 文本 是 安全 可 靠 的 。 因 为 需要 把 <img> 、<td> 和 
<tz> 标 签 和 文本 内 容 连接 成 一 个 文本 字符 串 ,， 所 以 必须 保证 文本 内 容 中 不 包含 <、> 或 字符 。 确 
保 HTML 字 符 串 安全 的 一 种 方式 就 是 在 服务 器 上 处 理 它们 ， 比 如 把 所 有 < 转换 成 el1t; 、 把 > 转换 
成 eggt;、 把 &g 转 换 成 camp; ， 等 等 。 


网 
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尽管 我 们 满腔 热情 地 使 用 这 两 个 函数 构建 起 了 所 有 表格 行 ， 但 其 实 使 用 

Mustache( https:/github.conyjanlmustache.js ) 或 Handlebars( http:/www.handlebarsjs. 

comy/ ) 等 JavaScript 模 板 系 统 ， 可 以 省 去 很 多 手工 处 理 和 连接 字符 串 的 工作 。 随 
着 项 目 规模 的 增 大 ， 使 用 模板 系统 的 好 处 会 越 来 越 明显 。 


12.5.1 修改 JSON 对 象 


如 果 我 们 只 想 调用 一 次 buildRows () 函数 , 那么 目前 处 理 authors 数 组 的 方式 没有 什么 问题 。 
然而 , 我 们 的 计划 是 每 次 对 行 排序 之 后 都 要 调用 一 次 这 个 函数 , 因此 最 好 是 能 够 提前 格式 化 好 作者 
的 信息 。 事 实 上 ,我们 也 可 以 针对 排序 来 格式 化 书 名 和 作者 信息 。 这 里 跟 第 二 个 表格 有 所 不 同 , 那 
个 表格 中 每 一 行 都 有 一 个 data-book 属 性 ， 该 属性 保存 着 可 以 用 来 排序 的 数据 ， 而 且 单元 格 中 也 
有 可 以 显示 的 数据 。 而 为 第 三 个 表 中 填充 数据 的 JSON 文 件 则 只 有 一 种 格式 。 此 时 ， 需 要 再 编写 一 
个 函数 , 在 调用 构建 表格 的 函数 之 前 , 先 修改 、 准 备 好 用 于 排序 和 显示 的 数据 , 参见 代码 清单 12-11。 


代码 清单 12-11 


function prepRows (rows) { 
$s.each(rows, function(i, row) { 
Var authors = [], 
authorsFormatted = []; 
rows[i] .titleFormatted = row.title; 
rows[i].title = row.title.toUpperCase(); 
$.each(row.authors, function(j, auth) { 
authors[j] = auth.last name + ' ' + auth.first name; 
authorsFormatted[j] = auth.first name + ' 
+ auth.last_ name; 
))3 
rows[i].authorsFormatted = authorsFormatted.join(', '); 
rows[i].authors = authors.join(' ').toUpperCase(); 
})s 
return rows; 


} 

通过 给 这 个 函数 传人 JSON 数 据 ， 我 们 为 表示 每 一 行 的 对 象 又 添加 了 两 个 属性 : authors 
Formatted 和 titleFormatted。 这 两 个 属性 将 用 于 显示 表格 内 容 , 而 原始 的 authors 和 title 
属性 则 用 于 排序 。 而 且 ， 用 于 排序 的 属性 也 已 经 转换 成 了 全 部 大 写 的 形式 ， 以 确保 排序 操作 
不 区 分 大 小 写 。 

当 我 们 在 $.getJSoN () 的 回调 函数 中 调用 这 个 preRows () 函数 后 , 我 们 把 修改 后 的 JSON 对 
象 保 存在 变量 *ows 中 ， 然 后 基于 这 个 修改 后 的 对 象 进行 排序 和 构建 。 这 意味 着 还 必须 修改 
buildRow() 函数 ， 使 其 在 提前 准备 数据 的 基础 上 能 够 变 得 更 加 简洁 ， 参 见 代 码 清 单 12-12。 


代码 清单 12-12 


function buildRow(row) { 









































nl 





























war html s: "etr>y 
html += '<td><img src="images/' + row.img + '"></td>'; 
图 
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html += '<td>' + row.titleFormatted + '</td>'; 
html += '<td>' + row.authorsFormatted + '</td>'; 
html += '<td>' + row.published + '</td>'; 
html] += '<td>$' + row.price + '</td>'; 
html += '</tr>'; 
return html; 
} 
$.getJSON('books.json', function(json) { 
$s (document) .ready (function() { 
var Stable3 = $('#t-3'); 
Var rows = prepRows (json); 
stable3.find('tbody') .html (buildRows (rows)); 
})3 
}) 3 


12.5.2” 按 需 重 新 构建 内 容 


现在 , 我 们 已 经 为 排序 和 显示 准备 好 了 内 容 。 接 下 来 该 考虑 如 何 修改 列 标题 和 编写 排序 的 代 
人 码 了 ， 参 见 代 码 清单 12-13。 


代码 清单 12-13 


$.getJSON('books.json', function(json) { 
$s (document) .ready (function() { 
var Stable3 = $('#t-3'); 
Var rows = prepRows (json); 
stable3.find('tbody') .html (buildRows (rows)); 
Var Sheaders = S$table3.findl('thead th').slice(1); 
Sheadqers 
.wrapInner('<a href="#"></a>') 
.addClass('sort'); 
Sheaders.on('click', function(event) { 
event .preventDefault(); 
Var Sheader = $ (this), 
sortKey = S$header.data('sort').key, 
sortDirection = 1; 
if ($header.hasClass('sorted-asc')) { 
sortDirection = -1; 
} 
rows.sort(function(a, b) { 
Var keyA = a[lsortKey]; 
var keyB bl[sortKey]; 
if (keyA keyB) return -sortDirection; 
if (keyA keyB) return sortDirection; 
return 0; 
于 
Sheadqers .emoveClass ('Sortedq-asc sorted-desc'); 
$header.addClass (sortDirection == 1 ? 'sorted-asc' 
'sorted-desc'); 
$stable3.children('tbody') .html (buildRows (rows)); 
})3 





VA 
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位 于 click 处 理 程序 中 的 代码 与 代码 清单 12-8 中 处 理 第 二 个 表格 的 相应 代码 几乎 完全 相同 。 
的 明显 区 别 是 这 里 的 每 次 排序 只 向 DOM 中 插入 一 次 元 素 。 在 第 一 和 第 二 个 表格 的 例子 中 ， 
即使 是 在 优化 了 代码 之 后 ， 仍 然 需要 排序 实际 的 DOM 元 素 ， 然 后 一 个 一 个 地 循环 并 将 它们 按照 
新 的 顺序 添加 到 DOM 中 。 例 如 ， 在 代码 清单 12-8 中 ， 通 过 循环 重新 插入 表格 行 的 代码 如 下 所 示 : 


$s.each(rows, function(index, row) { 
$stable2.children('tbody') .append (row); 
让 


从 性 能 的 角度 来 看 , 这 种 重复 性 的 DOM 插 入 操作 是 非常 费时 间 的 ,需要 插入 的 表格 行 越 多 ， 
效率 就 越 低 。 读 者 可 以 拿 它 与 代码 清单 12-13 中 对 应 的 代码 作 一 比较 : 

$stable3.children('tbody') .html (buildRows (rows)); 

在 这 里 , buildRows () 函数 返回 的 是 一 个 表示 很 多 行 的 HTML 字 符 串 , 一 下 子 就 把 所 有 行 插 
入 到 了 DOM 中 ; 没有 一 个 一 个 地 移动 现 有 的 行 ， 而 是 一 次 性 替换 所 有 行 。 


12.6 ”高 级 属性 操作 


现在 ， 相 信 读 者 对 取得 和 设置 DOM 元 素 的 值 已 经 非常 熟悉 了 。 我 们 可 以 使 用 .attr() 、 
.prop () 和 .css() 等 简单 的 方法 , 以 及 .addclass () 、.css() 和 .val() 等 方便 的 快捷 方法 ， 
还 可 以 使 用 像 .animate() 这样 封装 了 复杂 行为 的 方法 。 不 过 ， 即 便 是 简单 的 方法 都 在 后 台 
帮 我 们 完成 了 很 多 工作 。 如 果 能 够 理解 这 些 方法 都 在 后 台 做 了 什么 ， 那 一 定 能 够 更 好 地 利用 
它们 。 


12.6.1 简捷 地 创建 元 素 


我 们 在 jQuery 代码 中 创建 元 素 时 经 常会 把 HTML 字 符 串 传递 给 $ () 函数 ， 或 者 传递 给 其 他 
DOM 插 和 函数。 例如， 为 了 创建 多 个 DOM 元 素 ， 我 们 在 代码 清单 12-9 中 就 创建 了 一 个 相当 大 的 
HITML 片 段 。 这 种 方法 既 快速 又 简洁 。 但 有 时 候 ， 这 种 方式 也 不 是 最 理想 的 。 比 如 ， 我 们 有 时 候 
需要 在 使 用 文本 之 前 先 转 义 其 中 包含 的 特殊 字符 , 或 者 根据 浏览 器 不 同 为 它们 应 用 不 同 的 样式 规 
则 。 在 这 些 情况 下 ， 需 要 创建 相应 的 元 素 然 后 连 绥 其 他 jQuery 方法 对 它 进行 修改 。 这 种 技术 前 面 
我 们 已 经 用 过 好 多 次 了 。 不 过 ， 除 了 这 种 标准 的 技术 之 外 ，$ () 函数 还 提供 了 一 种 很 有 吸引 力 的 
语法 。 

假设 我 们 要 在 文档 中 的 每 个 表格 前 面 都 加 上 一 个 标题 。 可 以 使 用 .each () 循环 每 一 个 表格 ， 
然后 为 每 个 表格 创建 适当 的 标题 ， 参 见 代 码 清单 12-14。 


代码 清单 12-14 


$s (document) .ready (function() { 
$s('table') .each(function(index) { 
Var Stable = $ (this); 
$('<h3></h3>', { 
id: 'table-title-' + index, 

















mt 
> 
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'class': 'table-title', 

text: 'Table ' + (index + 1)， 

data: {'index': index}, 

click: function(event) { 
event .preventDefault(); 
stable.fadeToggle(); 

}; 
css: {glowColor: '#00ff£f00'} 
}) .insertBefore(s$stable); 

})3 
})3 


为 $ () 函数 传递 选项 对 象 作 为 第 二 个 参数 ， 与 先 创建 元 素 再 将 该 对 象 传递 给 .attr () 方 法 的 
结果 是 一 样 的。 大 家 都 知道 ，. attz() 方 法 的 作用 是 设置 DOM 属 性 ， 比 如 元 素 的 ia 等 。 

不 过 ,我们 例子 中 的 其 他 选项 看 起 来 可 能 会 让 人 有 点 迷惑 。 我 们 在 这 里 指定 了 : 
口 标题 的 文本 内 容 ; 
口 额外 的 数据 ; 
口 一 个 click 处 理 程序 ; 
口 一 个 包含 CSS 属 性 的 对 象 。 

虽然 这 些 并 不 是 DOM 属 性 , 但 同样 可 以 一 起 设置 。 简 写 的 $ () 语法 之 所 以 可 以 处 理 这 些 , 是 
因为 它 首先 检查 是 否 存在 给 定名 字 的 jQuery 方法 ， 如 果 是 就 会 调用 相应 的 方法 ， 而 不 是 设置 相应 
的 属性 。 
























































鉴于 jQuery 为 方法 赋予 了 比 属 性 名 更 高 的 优先 级 ,因此 我 们 必须 自己 注意 那 
些 容易 存在 歧义 的 情况 。 比 如 ，<input> 元 素 的 size 属 性 就 不 能 以 这 种 方式 来 
设置 ， 因 为 还 有 一 个 .size() 方 法 存在 。 





简写 的 $ () 函数 以 及 .attz () 方 法 通过 使 用 挂钩 hook ), 还 能 够 处 理 很 多 额外 的 DOM 属 性 。 





| 


12.6.2 ”DOM 创 建 挂钩 


通过 定义 适当 的 挂钩 ， 可 以 扩展 很 多 取得 和 设置 属性 的 jQuery 方法 ， 从 而 满足 某 些 特殊 情况 

下 的 需要 。 这 些 挂钩 实际 上 是 jQuery 命名 空间 中 的 数组 ， 比 如 s$.cssHooks 、$ .attrHooks。 一 

般 来 说 , 挂钩 是 保存 着 get 和 set 方 法 的 对 象 , 前 者 用 于 取得 请 求 的 值 , 后 者 的 作用 则 是 提供 新 值 。 
以 下 是 其 他 几 种 挂钩 。 




































































挂钩 类 型 修改 的 方法 示例 用 法 
$.attrHooks -attr() 阻止 元 素 的 type 属 性 被 修改 
$.cssHooks .css () 对 Internet Explorer 中 的 opacity 进 行 特殊 处 理 
$ .propHooks -prop() 纠正 safari 中 selected 属 性 的 行为 
$.valHooks “val () 支持 单 选 按 钮 和 复 选 框 跨 浏览 器 报告 一 致 的 值 
加 
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通常 ,这些 挂钩 所 做 的 工作 对 我 们 而 言 是 完全 不 可 见 的 , 我 们 不 必 知 道 它们 都 做 了 什么 就 可 
以 利用 它们 提供 的 便利 。 但 有 时 候 ， 确 实 也 需要 添加 我 们 自己 的 挂钩 ， 从 而 扩展 jQuery 方法 的 
行为 。 

编写 CSS 挂 钧 

代码 清单 12-14 向 页 面 中 注入 了 一 个 名 为 glowcolor 的 CSS 属 性 。 但 此 时 的 页 面 没 有 什么 反 

， 因 为 这 个 属性 根本 不 存在 。 不过, 我 们 马上 要 扩展 $ .cssHooks， 以 便 支持 这 个 新 造 的 属性 。 
我 们 要 在 某 个 元 素 设 置 了 glowColor 属 性 时 ,使 用 CSS3 的 text-shadow 属 性 为 该 元 
素 中 的 文本 应 用 柔和 发 光 效 果 。 因 为 Internet Explorer 不 支持 text-shadow, 所 以 我 们 要 使 用 微软 
专 有 的 filter 属 性 来 实现 同样 的 效果 ， 参 见 代 码 清 单 12-15。 



































代码 清单 12-15 


(function($) { 
Var div = document.createElement('div'); 
$.support.textShadow = div.style.textShadow === '' 
$.support.filter = div.style.filter === "' 
diy 三 WULL 
if (S$.support.textShadow) { 
$.cssHooks .glowColor = { 
set: function(elem, value) { 
if (value == 'none') { 
elem.style.textShadow = "" 
} 
else { 
elem.style.textShadow = '0 0 2px ' + value; 
} 
} 
}s 
} 
else { 
$.cssHooks.glowColor = { 
set: function(elem, value) { 
if (value == 'none') { 
elem.style.filter = '" 
} 
else { 
elem.style.zoom = 1; 
elem.style.filter = 
'progid:DXImageTransform.Microsoft' + 
'.Glow(Strength=2, Color=' + Value + ');'; 





} 
}; 
; 
}) (jQuery); 


一 个 挂 钧 由 针对 元 素 的 get 方 法 和 set 方 法 构成 。 为 了 保持 我 们 的 例子 尽量 简单 ， 这 里 只 定 
义 了 set 方 法 。 在 定义 挂钩 之 前 ， 代 码 先行 测试 了 某 些 属性 是 否 能 得 到 浏览 器 的 支持 。 如 果 浏 览 











网 
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器 支持 text-shadow， 则 使 用 该 属性 来 定义 挂钩 。 如 果 不 支 持 ， 则 检查 它 是 否 支 持 DirectX 滤 镜 ， 
并 在 支持 的 情况 下 使 用 相应 的 滤 镜 。 如 果 浏 览 器 这 两 种 属性 都 不 支持 ， 那 就 不 定义 挂钩 ， 因 而 
glowColor 也 就 不 起 任何 作用 了 。 

定义 了 这 个 挂钩 之 后 ， 标 题 文 本 就 有 了 2 像素 宽 的 绿色 的 发 光 效 果 ， 如 图 12-7 所 示 。 














Table 1 














网 12-7 


虽然 这 个 新 挂钩 让 我 们 如 愿 以 偿 , 但 它 仍然 缺少 很 多 应 有 的 属性 。 下 面 列 出 了 现在 这 个 挂钩 
的 几 个 不 足 。 
口 不 能 自 定 义 发 光 效 果 的 大 小 。 
口 这 个 效果 只 能 使 用 Fext-shadqow 或 filter 实现 ， 排 斥 其 他 方案 。 
口 没有 实现 get 方 法 ， 因 此 不 能 测试 属性 的 当前 值 。 
口 不 能 基于 这 个 属性 实现 动画 效果 。 
再 多 做 些 工作 ,多 写 些 代 码 ， 就 可 以 解决 上 述 这 些 问题 。 但 在 实际 开发 当中 ， 其 实 并 不 经 常 
需要 定义 自己 的 挂钩 ; 有 很 多 经 验 老 到 的 插件 开发 人 员 已 经 创建 了 能 够 满足 各 种 需要 的 挂 钧 , 包 
括 大 多 数 CSS3 属 性 。 






































列 出 所 有 优秀 的 插件 来 。 因 此 , 我 们 这 里 仅 向 读者 推荐 Brandon Aaron 开 发 的 CSS 


查找 挂钩 
六 插件 的 开发 可 谓 日 新 月 异 ， 随 时 都 可 能 有 新 的 挂 钓 出 现 ， 因 此 我 们 不 可 能 
挂钩 : https://github.com/brandonaaron/jquery-cssHooks。 


12.7 ”小结 





本 章 我 们 解决 了 一 个 常见 的 开发 问题 一 一 数据 表格 排序 。 从 三 个 不 同 角度 阐述 了 实现 表格 
排序 的 方法 ,分 别 展示 了 各 自 的 优 劣 势 。 与 此 同时 ， 我 们 也 进一步 掌握 了 原来 学 习 过 的 DOM 
操作 技术 ， 同 时 探索 了 使 用 .qata() 方 法 与 HTML5 的 数据 属性 在 DOM 元 素 上 设置 相关 数据 的 
新 方式 。 此 外 , 本 章 还 揭 开 了 一 些 DOM 修 改 的 底层 机 制 , 向 大 家 展示 了 如 何 根据 需要 扩展 这 些 
机 制 。 


























延伸 阅读 


要 了 解 有 关 选 择 符 与 遍历 方法 的 完整 介绍 ， 请 参考 本 书 附录 C 或 jQuery 官方 文档 : 
http://api.jquery.com/。 
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12.8 ”练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
“挑战 ”练习 有 一 些 难 度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : http://api. 
jquery.comy/。 
(1) 修改 第 一 个 表格 排序 中 的 排序 键 ， 让 书 名 ( Title ) 和 作者 ( Authors ) 列 按照 文本 长 度 排 
序 ， 而 不 是 按 字母 顺序 排序 。 
(2) 使 用 HTMLS 的 数据 属性 计算 第 二 个 表格 中 所 有 图 书 定价 之 和 ， 并 将 这 个 总 和 插入 到 该 
列 的 表 头 中 。 
(3) 修改 第 三 个 表格 中 使 用 的 比较 函数 ， 在 按 书 名 列 排序 时 让 书 名 包含 jQuery 的 图 书 排 到 
前 头 。 
(4) 挑战 : 实现 glowcolor 这 个 CSS 挂 钩 的 get 回 调 函 数 。 
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很 多 Web 应 用 都 需要 频繁 的 网 络 通信 。 使 用 jQuery， 可 以 在 不 让 浏览 器 加 载 新 页 面 的 情况 
下 与 服务 器 交换 信息 。Ajax 技 术 是 非常 重要 的 ， 而 借助 jQuery 则 更 容易 实现 很 多 非常 地 道 的 
应 用 。 

第 6 童 学 习 了 与 服务 器 异步 通信 的 基本 技术 ， 本 章 将 更 深入 地 学 习 jQuery 的 Ajax 特 性 : 
口 网 络 中 断 的 情况 下 可 用 的 错误 处 理 技术 ; 
口 jQuery 延迟 对 象 系统 与 Ajax 之 间 的 交互 ; 
口 通过 缓存 和 节 流 保持 网 络 流量 最 小 化 的 不 同方 式 ; 
口 使 用 传输 ( transport )、 滤 清 器 〈prefilter ) 和 数据 类 型 转换 扩展 Ajax 系统 。 


13.1 渐进 增强 与 Ajax 


相信 大 家 对 渐进 增强 这 个 概念 已 经 不 陌生 了 。 请 允许 我 在 这 里 再 喝 嗪 一 遍 : 渐进 增强 就 是 先 
着 手 实现 一 个 具有 基本 功能 的 产品 , 然后 在 些 基 础 上 为 使 用 现代 浏览 器 的 用 户 添 加 一 些 装饰 ,以 
保证 所 有 用 户 享受 到 基本 甚至 更 好 的 体验 。 

大 量 运用 Ajax 的 应 用 经 常会 面临 用 户 不 能 使 用 JavaScript 的 风险 。 为 了 避免 这 种 风险 , 可 以 先 
使 用 表单 构建 一 个 传统 的 客户 端 -服务 器 页 面 ， 而 在 JavaScript 可 用 的 情况 下 再 修改 表单 ， 提 供 更 
有 效 的 交互 方式 。 

下 面 我 们 来 写 一 个 例子 ， 实 现 通 过 表单 来 查询 jQuery API 文 档 。 既 然 jQuery 网 站 上 已 经 有 了 
这 么 一 个 表单 ， 那 么 我 们 在 这 里 只 要 照抄 过 来 就 好 了 : 

<form id="ajax-form" action="http://api.jquery.com/" method="get"> 

<fieldset> 
<div class="text"> 
<label for="title">Search</label> 


<input type="text" id="title" name="s"> 
</div> 






































<div class="actions"> 
<button type="submit">Request</button> 
</div> 
</fieldset> 
</form> 
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下 载 示例 代码 

了 如 同 本 书 其 他 HTML、CSS 以 及 JavaScript 示 例 一 样 ， 上 面 的 标记 只 是 完整 文 
档 的 一 个 片段 。 如 果 读 者 想 试 一 试 这些 示 例 ， 可 以 从 以 下 地 址 下 载 完 整 的 示例 代 
码 : Packt Publishing 网 站 http://www.packtpub.com/support ， 或 者 本 书 网 站 
http://book.learningjquery.com/。 


个 搜索 表单 已 经 应 用 了 一 些 CSS 样 式 , 但 实际 上 只 是 一 个 常规 的 表单 元 素 ， 其 中 包含 一 个 
人 如 图 13-1 所 示 。 





Search 
width 





Request 











图 13-1 


在 单 击 Request 按 钮 后 ， 这 个 表单 照常 提交 ， 用 户 的 浏览 器 会 跳 转 到 http://apijquery.com/， 而 
结果 如 图 13-2 所 示 。 


SJ IJQuery 


Write /ess do more. 


Download APlDocumentation Blog Plugins BrowserSupport 





Ajax Search Results for: width 


Global Ajax Event 
Handlers 


Helper Functions innerWidth() CSS | Dimensions | Manipulation > Style Propertles 
Low-Level Interface Get the current computed width for the first element in the set of matched 
Shorthand Methods elements, including padding but not border. 
Attributes » 
outerWidth() CSS | Dimensions | Manipulation > Style Properties 


Callbacks Object 
Get the current computed width for the first element in the set of matched 


Core elements, including padding and border. 





图 13-2 
如 果 JavaScript 可 用 ， 我 们 和 希望 把 上 图 中 的 内 容 加 载 到 搜索 页 面 的 #response 容 需 内 ， 而 不 
是 让 用 户 离开 当前 页 面 。 既然 数 据 和 表单 在 同一 个 服务 器 上 , 那么 就 可 以 使 用 .1oaa() 方 法 取得 
页 面 中 相关 的 部 分 了 ， 参 见 代码 清单 13-1。 
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代码 清单 13-1 


s(dqocument) .ready (function() { 
Var SajaxForm = $('#ajax-form'), 
Sresponse = $('#response'); 
SajaxForm.on('submit', function(event) { 
event .preventDefault(); 
$sresponse.load('http://api.jquery.com/ #content', 
SajaxForm.serialize()); 
}); 
于 


可 是 ， 这 个 API 站 点 有 一 个 不 同 的 主机 名 ， 浏览 器 的 同 源 策略 不 允许 这 样 传输 数据 。 怎 么 办 
呢 ? 我 们 现在 需要 一 个 好 用 的 跨 域 数 据 传输 方案 。 为 此 ， 我 们 在 http://book.learningjquery.com/ 上 
以 JSONP 格 式 公开 它 的 数据 ， 这 种 格式 很 适合 跨 域 使 用 。 





收获 JSONP 数 据 


第 6 章 曾 介绍 过 ，JSONP 无 非 就 是 简单 的 JSON 加 上 了 服务 器 支持 ， 让 我 们 能 够 向 不 同 的 站 点 
发 送 请 求 。 在 请 求 JSONP 数 据 时 ， 需 要 提供 一 个 特殊 的 查询 字符 串 参 数 ， 发 送 请 求 的 脚本 就 是 通 
过 该 参数 来 收获 数据 的 。JSONP 服 务 器 可 以 在 认为 合适 的 任何 时 候 调 用 该 参数 。 对 于 jQuery API 
站 点 而 言 ， 这 个 参数 ( 也 是 默认 的 名 字 ) 是 callback。 

因为 可 以 使 用 默认 回调 函数 名 ， 所 以 通过 jQuery 发 送 JSONP 请 求 时 ， 唯 一 要 做 的 就 是 说 明 我 
们 想 要 的 是 jsonp 类 型 的 数据 ， 参 见 代码 清单 13-2。 
代码 清单 13-2 

s(dqocument) .ready (function() { 


Var S$SajaxForm = $('#ajax-form'), 
Sresponse = $('#response'); 


























$ajaxForm.on('submit', function(event) { 
event .preventDefault(); 


$.ajax({ 

url: 'http://book.learningjquery.com/api/', 

dataType: 'jsonp', 

data: { 
title: $('#title').val() 

于 

success: function(data) { 
console.log(data); 














然后 ， 可 以 从 控制 台中 看 到 返回 的 JSONP 数 据 。 此 时 的 数据 是 对 象 的 数组 ， 每 个 对 象 描述 了 = 
一 个 jQuery 方法 ， 数 据 结 构 如 下 : 





网 
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{ 
"url": "http://api.jquery.com/innerWidth/", 
"name": "innerWidth", 
"title": ".innerWwidth()", 
"type": "method", 
"signatures": [ 
{ 
"added": "1.2.6" 
} 
| 
"desc": "Get the current computed width for the first element in the set of matched 
elements, including padding but not border.", 
"longdesc": "<p>This method returns the width of the element, including left and right 
padding, in pixels.</p>\n<p>This method is not applicable to <code>window</code> and 


<code>document</code> objects; 


for these, use <code><a href=\"/width\">.width()</a> 


</code> instead.</p>\n<p class=\"image\"><imgsrc=\"/images/0042_ 04_ 05.png\"/></p>", 


"categories": [ 
"CSS"， 
"Dimensions", 
"Manipulation > Style Properties", 
"Version > Version 1.2.6" 
Ys 
"download": 


. 














我 们 所 要 显示 的 关于 每 个 方法 的 数据 都 包含 在 这 些 对 象 里 了 。 只 要 套用 适当 的 格式 把 它们 显 


示 出 来 就 好 。 为 了 显示 每 个 方法 的 说 明 而 创建 HTML 代 码 有 点 麻烦 ， 


函数 ， 人 参见 代 码 清单 13-3。 


代码 清单 13-3 


var buildItem = function(item) { 
Var title = item.name, 


args = [], 
output = <LLe 
if (item.type == 'method' || !item.type) { 
if (item.signatures[0] .params) { 
$s.each(item.signatures[0] .params, function(index, 
args.push(val .name); 
有 
} 
title = (/^jQuery|deferred/) .test(title) ? title 
title += '(' + args.join(', ') + ')'; 
} else if (item.type == 'selector') { 
title. + * SelecGtor. 
} 
output += '<h3><a href="' + item.url + '">' + title + 
output += '<div>' + item.desc + '</div>'; 
output += '</l1i>'; 
return output; 


网 
咱 


因此 下 面 就 来 创建 一 个 辅助 


val). 1{ 


1" title; 


e/ar></ hry 
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这 个 builgItem() 函数 负责 把 JSONP 对 象 转换 为 一 个 HTML 列 表 项 。 在 此 , 必须 处 理 多 个 方 
法 参数 和 多 种 函数 签名 的 情况 ,所 以 使 用 了 循环 并 调用 了 . join () 方 法 。 这 一 步 完成 后 ， 又 创建 
了 一 个 指向 主 文档 的 链接 ， 然 后 输出 当前 项 的 描述 。 

这 样 ， 我 们 就 有 一 个 函数 ， 它 可 以 创建 一 个 列表 项 的 HTML 代 码 。 当 Ajax 调 用 完成 后 ， 可 以 
针对 每 一 个 对 象 来 调用 这 个 函数 ， 把 得 到 的 结果 显示 出 来 ， 参 见 代 码 清单 13-4。 


代码 清单 13-4 


$s (document) .ready (function() { 
Var S$ajaxForm $('#ajax-form' ) ， 
sresponse $('#response'), 
noresults 'There were no search results.'; 











var response 

var output 

if (json && json.length) { 
Output + "ol" 


function(json) { 


$s.each(json, function(index, val) { 
output += buildItem(val); 


}33 
output += '</ol>'; 
} else { 
output += noresults; 


} 


sresponse.html (output); 


> 


$ajaxForm.on('submit', function(event) { 
event .preventDefault(); 


$.ajax({ 
url: 'http://book.learningjquery.com/api/', 
dataType: 'jsonp', 


data: { 
title: $('#title').val() 
}» 
success: response 
} 
})s 
> 





因为 我 们 已 经 在 $.ajax() 选 项 的 外 部 定义 了 成 功 处 理 程序 , 所 以 可 以 直接 引用 它 的 函数 名 。 
即使 出 现 简洁 的 考虑 ， 也 可 以 在 这 里 使 用 一 个 嵌入 的 匿名 函数 。 但 为 了 保证 代码 清晰 可 读 , 单独 
定义 一 个 函数 显然 更 好 。 

定义 了 这 个 成 功 处 理 程序 后 ， 再 进行 搜索 就 可 以 在 表单 劳 边 显示 出 漂亮 的 结果 了 ， 如 图 13-3 
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1. .innerWidth() 


Get the current computed width for the first element in the set of 
width matched elements, including padding but not border. 


Search 





2. .outerWidth(inciudeMargin) 
Request Get the current computed width for the first element in the set of 

matched elements, including padding and border. 

3. .width() 
Get the current computed width for the first element in the set of 
matched elements. 

4. .width(value) 
Set the CSS width of each element in the set of matched elements. 











图 13-3 


13.2 处理 Ajax 错误 











在 应 用 中 引入 任何 形式 的 网 络 交 互 , 都 会 同时 带 来 某 种 不 确定 因素 。 用户 的 连接 可 





能 会 在 中 


途 停止 , 偶尔 的 服务 占 问 题 可 能 会 中 断 通信 。 鉴 于 这 些 问 题 都 会 影响 到 通信 的 可 靠 性 , 我 们 必须 











时 刻 做 好 最 坏 的 打算 ， 甚 至 要 做 好 处 理 错误 的 准备 。 





$ .ajax() 函数 可 以 接收 一 个 名 为 error 的 回调 函数 ， 这 个 函数 可 以 处 理 上 述 这 些 问 题 。 


在 这 


个 回调 函数 中 ,我们 应 该 向 用 户 提供 某 种 形式 的 反馈 ， 告 知 用 户 发 生 了 错误 ， 参 见 代 码 清单 13-5。 


代码 清单 13-5 


$s(document) .ready (function() { 
Var SajaxForm = S$('#ajax-form'), 
Sresponse = $('#response'), 
noresults = 'There were no search results.', 
failed = 'Sorry, but the request could not ' + 
'reach its destination. Try again later.'; 


$ajaxForm.on('submit', function(event) { 
event .preventDefault(); 


$.ajax({ 
url: 'http://book.learningjquery.com/api/', 
dataType: 'jsonp', 
data: { 
title: S$('#title') .val() 
js 
success: response, 
error: function() { 
$response.html (failed); 


触发 这 个 错误 回调 函数 的 情况 有 很 多 种 。 下 面 列 出 了 其 中 的 一 些 错误 。 
口 服务 器 返回 了 错误 状态 码 ， 例 如 403 Forbidden 、404 Not Found 或 500 Internet Server Error。 
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口 服务 器 返回 了 间接 的 状态 码 ， 例 如 301 Moved Permanently。 状 态 码 为 304 Not Modified 的 
异常 不 会 触发 错误 ， 因 为 浏览 器 可 以 正确 地 处 理 这 种 情况 。 
口 服务 器 返回 的 数据 不 能 按照 指定 方式 正确 解析 (例如 , 在 aataTrype 指 定 为 json 时 , 返回 
的 不 是 有 效 的 JSON 数 据 )。 
口 XMLHttpRequest 对 象 调用 了 .abort () 方 法 。 

检测 这 些 情况 并 对 它们 做 出 响应 是 提供 最 佳 用 户 体 验 的 关键 。 第 6 章 曾 讨论 过 ， 如 果 服 务 右 
返回 错误 ， 那么 通过 传递 给 错误 回调 函数 的 jaqxHR 对 象 的 .status 属 性 ， 可 以 检测 到 该 错误 。 换 
句 话 说， 使 用 jaxHR.status 的 值 可 以 对 不 同 的 错误 给 出 不 同 的 响应 。 

然而 ， 服 务 需 错误 只 有 你 检测 到 它 的 时 候 才 有 用 。 有 些 错误 可 以 立即 检测 到 ， 而 有 些 情 况 则 
会 导致 请 求 到 最 终 错误 响应 之 间 产 生 很 长 的 时 间 延 迟 。 

在 没有 既定 的 服务 器 端 超时 机 制 的 情况 下 , 我 们 可 以 在 客户 端 强制 设 定 请 求 的 超时 。 通 过 给 
timeout 选 项 传递 一 个 以 毫秒 表示 的 时 间 值 ,就 相当 于 告诉 $ .ajax() :如 果 响 应 在 多 长 时 间 内 没 
有 返回 ， 那 么 就 调用 它 自己 的 .abort () 方 法 ,参见 代码 清单 13-6。 


























代码 清单 13-6 


$ .ajax({ 
url: 'http://book.learningjquery.com/api/', 
dataType: 'jsonp', 
data: { 
title: $('#title').val() 
}; 
timeout: 15000, 
success: response, 
error: function() { 
sresponse.html (failed); 
} 
+})3 
设置 了 超时 时 间 后 ， 就 可 以 确保 在 15 秒 内 ， 要 么 正常 加 载 数 据 ， 要 么 用 户 能 看 到 一 条 错误 


消息 。 
13.3 ”jaqxXHR 对 象 


在 发 出 Ajax 请 求 时 ，jQuery 会 帮 有 我 们 确定 取得 数据 的 最 佳 方式 。 可 用 的 方式 包括 标准 的 
XMLHttpRequest 对 象 、 微 软 的 ActiveX 对 象 XMLHTTP， 或 者 <script> 标 签 。 

由 于 不 同 请 求 使 用 的 数据 传输 方式 可 能 不 一 样 , 那 我 们 就 需要 一 个 公共 的 接口 与 这 些 通 信 交 
互 。 为 此 ，JjqxHR 对 象 提 供 了 这 种 接口 : 在 zxMLHEtpRedquest 对 象 可 用 的 情况 下 ， 封 装 该 对 象 的 
行为 ; 在 XMLHttpRequest 对 象 不 可 用 的 情况 下 ， 则 尽 可 能 模拟 它 。 这 个 对 象 提供 给 我 们 的 属性 
和 方法 包括 : 
口 包含 返回 数据 的 .responseText 或 .responseXML; 
口 包含 状态 人 码 和 状态 描述 的 .status 和 .statusText; 
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口 操作 与 请 求 一 起 发 送 的 HTTP 头 部 的 .setReduestHeaaqer () ; 
口 提早 中 断 通信 的 .abort () 。 

jQuery 的 所 有 Ajax 方法 都 会 返回 jqxHR 对 象 ， 只 要 把 这 个 对 象 保 存 起 来 ， 随 后 就 可 以 方便 地 
使 用 这 些 属性 和 方法 。 








13.3.1 Ajax 承诺 


与 标准 的 XMLHttpRequest 对 象 相 比 ，jqxHR 对 象 有 一 点 非常 值得 重视 , 那 就 是 它 也 是 一 个 
承诺 对 象 。 在 第 11 章 讨论 延迟 对 象 时 , 我 们 知道 可 以 通过 它 来 设置 在 某 个 操作 完成 后 触发 的 回调 
函数 。Ajax 调 用 就 是 这 样 一 种 操作 ， 而 jqxHR 对 象 提供 了 延迟 对 象 所 承诺 的 方法 。 

使 用 这 些 承诺 对 象 的 方法 ， 可 以 重 写 $.ajax() 调 用 ， 把 success 和 erzor 回 调 函 数 替 换 成 
如 下 所 示 ， 参 见 代 码 清单 13-7。 


代码 清单 13-7 


$.ajax({ 
url: 'http://book.learningjquery.com/api/', 
dataType: 'jsonp', 
data: { 
title: S$('#title') .val() 
js 
timeout: 15000 
}) 
.done (response) 
.fail(function() { 
$response.html (failed); 
}); 


乍 一 看 , 调用 .done() 和 .fail() 与 之 前 的 写法 相 比 并 没有 明显 的 好 处 。 可 是 , 这 两 个 承诺 
方法 的 确 是 有 好 处 的 。 第 一 ， 可 以 多 次 调用 这 两 个 方法 ,根据 需要 添加 多 个 处 理 程 序 。 第 二 ， 如 
果 把 调用 $ .ajax() 的 结果 保存 在 一 个 变量 中 ， 那么 就 可 以 考虑 代码 的 可 读 性 ， 在 后 面 再 添加 处 
理 程序 。 第 三 , 如 果 在 添加 处 理 程序 的 时 候 Ajax 操 作 已 经 完成 , 就 会 立即 调用 该 处 理 程序 。 第 四 ， 
我 们 最 好 采用 与 jQuery 库 中 其 他 代码 一 致 的 语法 ， 这 带 来 的 好 处 不 言 而 喻 。 

使 用 承诺 方法 的 另 一 个 好 处 是 可 以 在 请 求 期 间 添 加 一 个 加 载 指示 器 , 然后 在 请 求 完 成 时 或 在 
其 他 情况 下 隐藏 它 。 这 时 候 ， 使 用 .always () 方 法 就 非常 方便 ， 参 见 代 码 清单 13-8。 


代码 清单 13-8 


$ajaxForm.on('submit', function(event) { 
event .preventDefault(); 




























































































$response.addClass('loading') .empty(); 


$.ajax({ 
url: 'http://book.learningjquery.com/api/', 
dataType: 'jsonp', 
data: { 
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title: $('#title').val() 
}; 
timeout: 15000 
}) 
.done (response) 
.fail(function() { 
sresponse.html (failed); 
有) 
.always (function() { 
$response.removeClass('loading'); 
}); 
}) 3 


在 发 送 $ .ajax() 调 用 之 前 ， 给 #response 容 器 添 加 1oading 类 。 而 在 加 载 完 成 时 ， 则 删除 
这 个 类 。 这 样 ， 就 可 以 进一步 增强 用 户 的 体验 。 

接 下 来 ， 我们 把 .ajax() 调 用 的 结果 保存 在 变量 里 ， 以 备 将 来 使 用 。 从 中 你 可 以 真正 理解 
这 种 承诺 行为 带 给 我 们 的 好 处 。 





13.3.2 ”缓存 响应 


如 果 想 重复 使 用 同一 段 数据 ， 那么 重复 发 送 Ajax 请 求 显 示 是 一 种 浪费 。 为 了 避免 这 样 做 ， 可 
以 把 返回 的 数据 缓存 在 一 个 变量 中 。 在 需要 使 用 某 些 数据 时 ， 可 以 检查 缓存 中 是 否 有 这 些 数据 。 
如 果 有 ， 就 直接 拿 来 用 即 可 。 如 果 没 有 ， 则 需要 发 送 Ajax 请 求 ， 并 在 它 的 .aone () 处理 程序 中 将 
数据 保存 在 缓存 里 ， 然 后 再 操作 返回 的 数据 。 

说 起 来 简单 , 做 起 来 得 需要 好 几 步 。 不 过 , 要 是 能 够 利用 承诺 对 象 的 属性 , 那 就 非常 简单 了 ， 
如 代码 清单 13-9 所 示 。 


代码 清单 13-9 


var api = {}; 





























$ajaxForm.on('submit', function(event) { 
event .preventDefault(); 


$sresponse.empty(); 


Var search = $('#title').val(); 
if (search == '') { 
return; 


} 
sresponse.addClass('loading'); 


if (!api[search]) { 
api[search] = $.ajax({ 
url: 'http://book.learningjquery.com/api/', 
dataType: 'jsonp', 
data: { 
title: search 


}, 





网 
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timeout: 15000 

}) 

} 

api[search] .done(response) .fail(function() { 
sresponse.html (failed); 

}) .always (function() { 

Sresponse.removeClass('loading'); 

})3 

} 


这 里 ， 我 们 新 声明 了 一 个 变量 ， 名 叫 api， 用 来 保存 创建 的 jqxHR 对 象 。 这 个 变量 本 身 是 一 
个 对 象 ， 它 的 键 对 应 着 执行 的 搜索 关键 词 。 在 提交 表单 时 ， 我 们 要 检查 一 下 jgqxHR 对 象 中 是 否 有 
那个 键 。 如 果 没 有 ， 就 像 以 前 一 样 执行 查询 ， 并 把 结果 对 象 保 存在 api 变 量 中 。 

有 了 jaqxHR 对 象 , 也 就 有 了 .done() 、.fail() 和 .always() 处 理 程序 。 注 意 ,无论 是 否 发 
送 Ajax 请 求 ，jqxHR 对 象 都 会 存在 。 现 在 这 里 需要 考虑 两 种 可 能 性 。 

首先 , 如 果 以 前 没有 查询 过 , 那么 可 能 会 发 送 Ajax 请 求 。 这 样 的 结果 跟 以 前 一 样 : 发 送 请 求 ， 
然后 使 用 承诺 方法 给 jqxHR 对 象 添加 处 理 程序 。 当 服务 器 返回 响应 时 ， 触 发 适当 的 回调 函数 ,将 
结果 输出 到 屏幕 上 。 
另 一 方面 ， 如 果 以 前 执行 过 这 个 查询 ， 那 么 jqxHR 对 象 已 经 保存 在 api 里 面 了 。 这 一 次 不 会 
执行 新 的 查询 , 但 我 们 仍然 可 以 在 保存 的 对 象 上 调用 承诺 方法 。 而 这 会 给 该 对 象 添加 新 的 处 理 程 
序 ， 由 于 作为 延迟 对 象 它 已 经 被 解决 了 ， 所 以 会 立即 触发 相关 的 处 理 程序 。 

jQuery 的 延迟 对 象 系统 会 在 后 台 把 所 以 这 些 工作 都 蔡 我 们 做 了 。 我 们 只 要 写 几 行 代码 ， 就 可 
以 消除 应 用 中 不 必要 的 网 络 请 求 。 



























































13.4 ”截流 Ajax 请 求 


实现 搜索 功能 时 , 越 来 越 常 见 的 一 个 功能 是 在 用 户 输 入 过 程 动 态 地 列 出 搜索 结果 来 。 通过 给 
keyup 事 件 绑 定 一 个 处 理 程序 ， 我 们 也 可 以 在 jQuery API 搜 索 中 模拟 这 种 实时 的 搜索 功能 ， 参 见 
代码 清单 13-10。 


代码 清单 13-10 


$s('#title') .on('keyup', function(event) { 
$ajaxForm.triggerHandler('submit'); 


六 

这 样 ， 只 要 用 户 在 Search 字 段 中 输入 内 容 , 就 会 触发 表单 的 submit 处 理 程序 。 如 果 用 户 连续 
输入 的 速度 很 快 ， 那 么 就 会 通过 网 络 发 送 很 多 请 求 。 结 果 可 能 会 拖 慢 JavaScript 的 运行 速度 ， 拖 
慢 网 络 连 接 ， 最 后 可 能 连 服务 器 也 处 理 不 过 来 这 种 请 求 了 。 

通过 缓存 请 求 的 结果 ,我 们 已 经 节省 了 一 些 请 求 了 。 不 过 ,通过 截流 请 求 ， 还 能 够 进一步 减 
少 服务 器 的 负担 。 第 10 章 在 创建 特殊 的 throttledscroll 事 件 以 减少 触发 原生 sroll 事 件 次 数 
的 时 候 ， 曾 经 涉及 截流 的 概念 。 在 这 里 ,我 们 要 考虑 类 似 的 减少 活动 次 数 的 问题 ,这 个 活动 就 是 
keyup 事 件 ， 参 见 代 码 清 单 13-11。 
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代码 清单 13-11 
Var searchTimeout, 


searchDelay = 300; 


$('#title').on('keyup', function(event) { 

clearTimeout (searchTimeout); 

searchTimeout = setTimeout (function() { 

SajaxForm.triggerHandler('submit'); 

}, searchDelay); 
过 
这 里 使 用 的 技术 ( 有 时 候 了 被 称 为 “消除 抖动 ”) 与 第 10 章 使 用 的 有 点 不 一 样 。 在 第 10 章 的 
例子 中 ， 我 们 需要 scrol11 处 理 程序 随 着 滚动 的 继续 多 次 发 挥 作用 。 而 在 这 里 ， 我 们 希望 keyup 
行为 在 输入 完成 后 只 发 生 一 次 ,为 此 ,我 们 在 用 户 按 下 第 一 个 键 的 时 候 设置 一 个 JavaScript 计 时 器 ， 
然后 跟踪 该 计时 器 。 随 后 的 每 一 次 击 键 动 作 都 会 重 置 该 计时 器 ,只 有 用 户 停止 击 键 的 时 间 超 过 预 
定 的 300 毫 秒 后 ， 才 会 触发 submit 处 理 程 序 并 发 送 Ajax 请 求 。 




















13.5 扩展 Ajax 功能 


jQuery 的 Ajax 框架 不 可 谓 不 强大 ， 这 一 点 我 们 已 经 目睹 了 。 但 即便 如 此 ， 我 们 仍然 会 遇 到 某 
些 情况 ,和 希望 能 够 改变 这 个 框架 的 一 些 行为 。 没 问题 ，jQuery 为 此 提供 了 很 多 挂钩 ， 可 以 让 插件 
为 它 添加 各 种 新 功能 。 


13.5.1 数据 类 型 转换 器 


第 6 章 在 介绍 $.ajaxsetup () 函数 时 ， 我 们 知道 通过 它 可 以 修改 $.ajax:() 使 用 的 默认 值 ， 
只 用 一 条 语句 就 可 以 影响 后 续 的 很 多 Ajax 操作 。 通 过 这 个 函数 ， 也 可 以 为 $.ajax() 添 加 它 能 
请 求 和 解释 的 各 种 数据 类 型 。 

下 面 这 个 例子 将 创建 一 个 能 够 解释 YAML 数 据 格式 的 转换 器 。YAML ( http://www.yaml.org/ ) 
是 一 种 流行 的 数据 表示 格式 , 很 多 语言 都 实现 了 对 这 种 格式 的 支持 。 如 果 我 们 的 脚本 需要 准备 与 
这 种 格式 交互 ，jQuery 也 可 以 让 我 们 在 原生 的 Ajax 函 数 中 添加 对 它 的 支持 。 

一 个 包含 jQuery 方法 类 别 和 子 类 别 的 YAML 文件 的 示例 如 下 : 

Ajax: 


- Global Ajax Event Handlers 
- Helper Functions 


























- Low-Level Interface 
- Shorthand Methods 
Effects: 

- Basics 

Custom 

Fading 

Sliding 
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我 们 可 以 给 jQuery 附加 一 个 已 有 的 YAML 解 析 器 ,比如 Diogo Costa 开 发 的 ( http://code.google. 
com/p/javascript-yaml-parser/ )， 从 而 让 $ .ajax() 能 够 解析 这 种 格式 。 

要 定义 一 种 新 的 Ajax 数 据 类 型 ,需要 给 $ .ajaxSetup() 传 递 三 个 参数 :accepts、contents 
和 converters。 其 中 ，accepts 属 性 会 添加 发 送 到 服务 器 的 头 部 信息 ， 声 明 我 们 的 脚本 可 以 理 
解 的 特定 MIME 类 型 ; contents 属 性 处 理 数据 交换 的 男 一 方 , 它 提 供 一 个 与 响应 的 MIME 类 型 进 
行 匹配 的 正则 表达 式 ， 以 尝试 自动 检测 这 个 元 数据 当中 的 数据 类 型 。 最 后 ，converters 中 包含 
解析 返回 数据 的 函数 ， 参 见 代 码 清单 13-12。 


代码 清单 13-12 


$.ajaxSetupl({ 
accepts: { 
yaml: 'application/x-yaml, text/yaml' 
} 
contents: { 
yaml: /yaml/ 

















js 
converters: { 
'text yaml': function(textValue) { 
console.log(textValue); 
return “' 
} 
} 
站 


$s.ajax(t{ 
url: 'categories.yml', 
dataType: 'yaml' 

了 让 


在 代码 清单 13-12 中 的 这 个 特定 的 实现 中 ，$ .ajax() 读 取 了 一 个 YAML 文 件 并 将 数据 库 声明 
为 yaml 。 因 为 到 来 的 数据 会 按照 fext 格 式 解 析 ，jQuery 需 要 一 种 机 制 能 把 一 种 数据 类 型 转换 为 
另 一 种 数据 类 型 。converters 的 'text yaml' 告 诉 jQuery, 这 个 转换 水 数 以 text 格 式 接收 数据 ， 
然后 以 yaml 格 式 重新 解析 。 

在 转换 函数 内 部 , 我 们 把 文本 内 容 记 录 到 控制 台中 ,以 便 验 证 这 个 函数 能 够 被 正确 调用 。 要 实 
际 地 执行 转换 ， 需 要 加 载 第 三 方 的 YAML 解 析 库 〈yamljs ) 并 调用 其 方法 ， 如 代码 清单 13-13 所 示 。 
代码 清单 13-13 


S.ajaxSetup ({ 
accepts: { 
yaml: 'application/x-yaml, text/yaml' 
js 
contents: { 
yaml: /yaml/ 
ji 
converters: { 
'text yaml': function(textVvalue) { 
Var result = YAML.eval (textValue); 























网 
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Var errors = YAML.getErrors(); 
if (errors.length) { 

throw errors; 
} 


return result; 


> 


$.getSscript('yaml.js') .done(function() { 

$.ajax({ 
url: 'categories.yml', 
dataType: 'yaml' 

}) .done (function (data) { 
Var cats = ''; 
$.each(data, function(category, subcategories) { 

cats += '<li><a href="#">' + category + '</a></li>'; 

}); 


$(document) .ready (function() { 
Var S$cats = $('#categories').removeClass('hide'); 
$s('<ul></ul>', { 
html: cats 
}) .appendTo ($cats); 
}); 
}); 
}) 3 
加 载 的 yaml . js 文件 中 包含 一 个 yam1 对 象 , 该 对 象 有 .eval () 和 .getErrors() 方 法 。 我 们 
就 使 用 了 这 两 个 方法 来 解析 收 到 的 文本 , 然后 以 JavaScript 对 和 象 的 形式 返回 包含 categories.yml 中 数 
据 的 结果 。 这 个 结果 中 的 数据 很 容易 通过 遍历 取得 。 因 为 这 个 文件 中 包含 jQuery 方法 的 类 别 ， 所 
以 我 们 就 使 用 解析 后 的 结构 来 显示 顶级 类 别 ， 然 后 让 用 户 通 过 单 击 这 些 顶 级 类 别 来 筛选 搜索 结 
果 ， 如 图 13-4 所 示 。 
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图 13-4 
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这 里 要 注意 的 是 , 在 插入 类 别名 的 时 候 , 需要 把 相应 的 代码 放 在 $ (doucment) .ready () 调 
用 中 。Ajax 操 作 可 能 会 立即 运行 ， 无需 访问 DOM,，, 但 当 结 果 返 回 后 ， 必 须 等 到 DOM 可 用 才能 继 
续 操 作 。 以 这 种 方式 来 编写 代码 ,可 以 让 它 尽 可 能 早 地 运行 ,从 而 增强 用 户 对 页 面 加 载 时 间 的 感 
知 速度 。 

接 下 来 ,我 们 处 理 单 击 类 别 链接 的 操作 ， 如 代码 清单 13-14 所 示 。 
代码 清单 13-14 


$s(document) .on('click', '#categories a', function(event) { 
event .preventDefault(); 


$s (this) .parent() .toggleClass('active') 
.Siblings('.active') .removeClass('active'); 
$('#ajax-form') .triggerHandler('submit'); 
}) 
通过 把 click 处 理 程序 绑 定 到 文档 并 使 用 事件 委托 , 可 以 避免 某 些 耗 时 的 重复 性 操作 。 而 且 ， 
可 以 马上 运行 这 些 代码 ， 而 不 必 等 待 Ajax 调 用 完成 。 
在 这 个 处 理 程序 中 ， 要 确保 突出 显示 正确 的 类 别 ， 然 后 再 触发 表单 的 submit 处 理 程序 。 虽 
然 突出 显示 如 期 生效 ,但 表单 还 不 能 就 被 单 击 的 类 别名 作出 任何 反应 ， 如 图 13-5 所 示 。 
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图 13-5 




















最 后 , 就 是 更 新 表单 的 submit 处 理 程序 , 根据 被 激活 的 类 别 筛选 方法 ,参见 代码 清单 13-15。 





代码 清单 13-15 


SajaxForm.on('submit', function(event) { 
event .preventDefault(); 


sresponse.empty (); 


var title = S$('#title’') .val().; 
Category = $('#categories') .find('l1li.active') .text(), 


search = category + '-' + title; 
if (search == '-") { 
return; 
器 
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} 
sresponse.addClass('loading'); 


if (!api[search]) { 
api[search] = $.ajax(t{ 
url: 'http://book.learningjquery.com/api/', 
dataType: 'jsonp', 
data: { 
titles tit1eé, 
category: category 
}, 
timeout: 15000 
})3 
} 
api[search] .done (response) .fail (function() { 
sresponse.html (failed); 
}) .always (function() { 
$sresponse.removeClass('loading'); 


的 
站 


$('#title').on('keyup', function(event) { 
clearTimeout (searchTimeout); 
searchTimeout = setTimeout (function() { 
SajaxForm.triggerHandler('submit'); 
}, searchDelay); 
}) 3 


这 里 并 没有 简单 地 取得 搜索 字段 的 值 ， 而 是 检索 了 激活 的 类 别名 的 文本 ,然后 通过 Ajax 同时 
传递 这 两 个 信息 。 而 且 ， 我 们 还 修改 了 search 变 量 ， 让 它 既 包含 category 也 包含 titte。 这 样 ， 搜 
索 结果 的 缓存 就 能 够 正确 地 区 分 不 同类 别 下 相同 文本 的 搜索 。 

现在 , 通过 单 击 类 别名 称 可 以 看 到 某 个 类 别 下 的 所 有 方法 , 也 可 以 使 用 类 别 列 表 来 租 选 通过 
搜索 字段 搜索 到 的 结果 ， 如 图 13-6 所 示 。 
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图 13-6 
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其 他 类 似 的 数据 类 型 也 可 以 像 这 里 定义 YAMI 一 样 来 定义 。 这 样 ， 就 可 以 把 jQuery 的 Ajax 库 
改造 成 适合 我 们 自己 项 目 需 要 的 得 力 工 具 。 





13.5.2 ”Ajax 预 过 滤器 


通过 $ .ajaxPrefilter() 因数 可 以 添加 预 过 滤器 。 所 谓 预 过 滤器 ， 就 是 一 些 回 调 函 数 ， 它 
们 可 以 在 发 送 请 求 之 前 对 请 求 进行 过 滤 。 预 过 滤器 会 在 $ .ajax () 修改 或 使 用 它 的 任何 选项 之 前 
调用 ， 因 此 通过 预 过 滤器 可 以 修改 这 些 选 项 或 基于 新 的 、 自 定义 选项 发 送 请 求 。 

预 过 滤器 通过 返回 要 使 用 的 数据 类 型 ， 也 可 以 操作 请 求 的 数据 类 型 。 前 面 YAML 的 例子 中 将 
数据 类 型 指定 为 yaml ， 是 因为 我 们 不 想 依 赖 服 务 需 为 响应 提供 正确 的 MIME 类 型 。 不 过 , 我 们 倒 
是 可 以 提供 一 个 预 过 滤器 ， 确 保 请 求 URL 中 包含 相应 的 文件 扩展 名 〈 .yml )， 数 据 类 型 一 定 是 
yaml ， 参 见 代码 清单 13-16。 









































代码 清单 13-16 
$.ajaxPrefilter (function(options) 
if (/\.yml$/.test(options.url)) 
return 'yaml'; 
} 
站 


这 里 使 用 了 一 个 简短 的 正则 表达 式 测试 options .url 中 是 否 包 含 .yml。 如 果 是 ， 则 将 数据 
类 型 定义 为 yaml1。 有 了 这 个 预 过 滤器 ,就 不 需要 给 我 们 取得 YAML 文 档 的 Ajax 调 用 明确 地 定义 数 
据 类 型 了 。 


13.5.3 ”替代 传输 方式 


我 们 已 经 看 到 jQuery 在 适当 的 时 候 会 使 用 xMLHttpRequest、ActiveX 或 <script> 标 签 来 处 
理 Ajax 事 务 。 如 果 我 们 愿意 ， 也 可 扩展 这 种 传输 ( transport ) 机 制 。 

这 种 传输 机 制 依赖 于 一 个 对 象 来 实际 地 负责 Ajax 数据 的 传输 。 新 的 传输 对 象 定 义 为 工厂 函 
数 ， 返 回 一 个 带 有 .senda() 和 .abort () 方 法 的 对 象 。 其 中 ，. send () 方 法 负责 发 送 请 求 、 处 理 
响应 并 把 数据 发 送 给 回调 函数 。 而 .abort () 方 法 会 立即 停止 请 求 。 

比如 说 ， 可 以 创建 一 个 自 定义 的 传输 对 象 ， 使 用 <img> 元 素来 取得 外 部 数据 。 也 就 是 说 ， 加 
载 图 像 的 处 理 方式 会 与 其 他 Ajax 请 求 的 处 理 方式 相同 , 这 样 会 让 代码 在 内 部 更 好 地 保持 一 致 。 创 
建 这 个 新 传输 对 象 的 JavaScript 代 码 并 不 那么 简单 , 因此 我 们 直接 看 完成 后 的 结果 , 然后 再 分 析 关 
键 代 码 的 作用 ， 参 见 代码 清单 13-17。 


代码 清单 13-17 


$.ajaxTransport('img', function(settings) { 
var S$img, img, prop; 
return { 
send: function(headers, complete) { 
function callback(success) { 


{ 
{ 
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if (success) { 
complete(200, 'OK', {img: img}); 
} else { 
$img.remove(); 
complete(404, 'Not Found'); 
} 
} 


Simg = $('<img>', { 
src: settings.url 

上 

img = $img[0]; 


prop = typeof img.naturalWidth === 'undefined' ? 'width' : 'naturalWidth'; 
if (img.complete) { 
callback( !!img[prop] ); 
} else { 
$simg.on('load error', function(event) { 
callback (event .type == 'load'); 


和 
} 


}; 
abort: function() { 
if ($img) { 
Simg.remove() ; 
} 
}3 
}) 3 


在 定义 传输 对 象 时 ， 首 先 需要 向 $.ajaxTransport () 传 人 一 个 数据 类 型 。 这 是 告诉 jQuery 
什么 时 候 该 使 用 我 们 的 传输 方式 ， 而 不 是 使 用 内 置 的 机 制 。 然 后 ,再 提供 一 个 函数 ， 该 函数 能 够 
返回 带 有 相应 的 .send() 和 .abort () 方 法 的 新 传输 对 象 。 

对 这 个 img 传 输 对 象 ，. send () 方法 需要 创建 一 个 新 的 <img> 元 素 ， 并 为 它 设 置 src 特 性 。 
这 个 特性 的 值 来 自 settings .url， 是 由 jQuery 通过 $ .ajax() 调 用 传人 的 。 浏 览 器 在 创建 这 个 
<img> 元 素 时 ， 会 加 载 引 用 的 图 像 文件 ， 因 此 在 这 里 需要 检查 什么 时 候 加 载 完成 ， 然 后 触发 完成 
回调 函数 。 

如 果 想 适应 不 同 浏览 妖 及 不 同 版 本 ， 那 就 需要 一 些 技巧 才能 正确 地 检测 图 像 是 否 加 载 完 成 。 
在 某 些 浏览 器 中 ,可 以 简单 地 给 图 像 元 素 添加 1oad 和 error 事 件 处 理 程序 , 而 在 男 一 些 浏览 器 中， 
当 图 像 被 缓存 的 时 候 ，1load 和 error 不 会 像 我 们 想象 的 那样 被 触发 。 









































章 “ 我 的 图 片 加 载 了 吗 ? ”(Is My Image Loaded? )， 地 址 是 : http://www.verious. 


要 了 解 浏览 器 加 载 图 片 时 不 一 致 的 行为 , 读者 可 以 参考 Lucas Smith 的 博客 文 
com/tool/is-my-image-loaded/。 


代码 清单 13-17 中 的 代码 可 视 情 况 通 过 检测 .complete、.width 和 .naturalwidth 属 性 来 
解决 这 个 问题 。 在 检测 到 图 像 加 载 完成 后 ( 可 能 成 功 、 完 成 ， 也 可 能 出 错 )， 调 用 callback () 








网 


灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 





276 第 13 章 高 级 Ajax 





函数 ，callback() 函数 再 调用 传递 给 .senda() 的 complete () 函数 。 这 样 ，$ .ajax() 就 能 对 图 
像 的 加 载 给 出 响应 。 

对 于 停止 加 载 的 处 理 就 要 简单 多 了 。 这 里 的 .abort () 方 法 要 做 的 就 是 一 些 清理 工作 ， 它 只 
需要 在 创建 了 <img> 元 素 的 情况 下 把 该 元 素 删除 即 可 。 

接 下 来 ， 我 们 就 写 一 个 $ .ajax() 调 用 来 使 用 这 个 新 的 传输 机 制 ， 参 见 代码 清单 13-18。 


代码 清单 13-18 


$s(document) .ready (function() { 
$s.ajax(t{ 
url: 'missing.jpg', 
dataType: 'img' 
}) .done(function(img) { 
$s('<div></div>', { 
id: 'picture', 
html: img 
}) .appendTo('body'); 
}) .fail (function(xhr, textStatus, msg) { 


$s('<div></div>', { 
id; picture", 
html: textStatus + ': ' + msg 


}) .appendTo('body'); 
让 
基肥 


要 使 用 自 定义 的 传输 机 制 , 需要 给 $ .ajax () 提供 一 个 对 应 的 aataType 值 。 然 后 , 成 功 及 失 
败 处 理 程序 要 分 别处 理 好 各 自 接收 到 的 数据 。 我 们 的 img 传 入 机 制 在 成 功 的 时 候 返 回 一 个 <img> 
DOM 元 素 , 所 以 .done () 处理 程 序 就 以 这 个 元 素 作为 新 创建 的 <div> 元 素 的 HTML 内 容 , 然后 再 
将 <aiv> 元 素 插入 到 文档 中 。 

不 过 ， 在 我 的 例子 中 ， 指 定 的 文件 ( missing.jpg ) 并 不 存在 ; 这 就 需要 通过 .fail() 处 理 程 
序 来 处 理 了 。. fail () 处 理 程 序 会 在 <aiv> 元 素 中 本 应 插入 图 像 的 地 方 插入 一 条 错误 消息 ， 如 图 
13-7 所 示 。 
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只 要 引用 一 幅 实际 存在 的 图 像 ， 就 可 以 避免 出 错 ， 如 代码 清单 13-19 所 示 。 


代码 清单 13-19 


$s(document) .ready (function() { 
$s.ajax({ 
url: 'sunset.jpg', 
dataType: 'img' 
}) .done (function(img) { 
s('<div></div>', { 
id: 'picture', 
html: img 
}) .appendTo('body'); 
}) .fail (function(xhr, textStatus, msg) { 





$s('<div></div>', { 
id: 'picture', 
html: textStatus + ': ' + msg 


}) .appendTo('body'); 
其 
})3 


现在 ,我 们 定义 的 新 的 传输 机 制 成 功 地 加 载 了 图 像 ， 可 以 在 页 面 上 看 到 图 像 了 ， 如 图 13-8 
所 示 。 
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图 13-8 





创建 新 的 传输 机 制 是 一 种 不 常见 的 需求 ， 但 即使 是 在 这 种 情况 下 ，jQuery 的 Ajax 功能 仍然 能 
够 满足 我 们 的 需要 。 





13.6 小结 


在 本 书 这 最 后 一 章 里 ,我 们 进一步 探索 了 jQuery 的 Ajax 框 架 。 我 们 学 习 了 如 何在 页 面 中 营造 
更 加 流畅 的 用 户 体验 ,如 何 根据 需要 获取 外 部 资源 ， 同 时 也 关注 了 错误 处 理 、 缓 存 以 及 截流 等 技 
术 。 随 后 ， 我 们 又 学 习 了 Ajax 框架 的 内 部 运行 机 制 ， 包 括 承诺、 传输、 预先 科 选 和 转换 器 。 最 后 
还 学 习 了 如 何 根据 我 们 的 需求 扩展 传输 机 制 。 
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延伸 阅读 


要 了 解 有 关 选 择 符 与 遍历 方法 的 完整 介绍 ， 请 参考 本 书 附 录 C 或 jQuery 官方 文档 : 
http://api.jquery.com/。 


13.7 练习 


要 完成 以 下 练习 ， 读 者 需要 本 章 的 index.html 文 件 ， 以 及 complete.js 中 包含 的 已 经 完成 的 
JavaScript 代 码 。 可 以 从 Packt Publishing 网 站 http:/www.packtpub.com/support 下 载 这 些 文件 。 
“挑战 ”练习 有 一 些 难度 ， 完 成 这 些 练习 的 过 程 中 可 能 需要 参考 jQuery 官方 文档 : 
http://api.jquery.com/。 
(1) 修改 buildItem() 函数 ， 以 便 包 含 它 显示 的 每 个 jQuery 方法 的 较 长 篇 幅 的 说 明 。 
CO) 挑战 : 在 页 面 中 添加 一 个 表单 , 指向 Flickr 的 公开 图 片 搜索 (http:/www.flickr.com/search )， 
其 中 包含 一 个 <input name="q"> 和 一 个 提交 按钮 。 基 于 渐进 增强 的 原则 从 Flickr 的 
JSONP 数 据 源 服务 ( http://api.flickr.com/services/feeds/photos_public.gne ) 取得 照片 ， 然 后 
把 照片 插入 到 页 面 的 内 容 区 域 。 在 回 该 服务 发 送 aata 时 ,使 用 Fags 而 不 是 gs， 把 format 
设置 为 json。 还 要 注意 的 是 ， 这 个 服务 要 求 的 JSONP 回 调 函 数 名 是 jsoncallback， 而 
不 是 callback。 
(3) 挑战 : 向 Flickr 请 求 添加 错误 处 理 程序 ， 以 防 它 返 回 parsererror。 为 了 测试 这 个 错误 处 
理 程序 ， 把 JSONP 回 调 函 数 名 修改 为 callback， 然 后 测试 一 下 。 
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在 本 书 中 ， 我 们 看 到 过 很 多 以 函数 作为 参数 的 jQuery 方法 。 在 我 们 所 举 的 例子 中 ， 也 曾经 反 
复 地 创建 、 调 用 和 传递 函数 。 虽然 我 们 平时 只 需 粗 略 地 了 解 JavaScript 的 内 部 工作 机 制 , 就 可 以 这 
样 使 用 函数 , 但 是 ,如 果 缺 乏 对 这 个 语言 特性 的 深入 理解 , 那么 这 些 操作 的 负面 作用 也 会 时 不 时 
给 我 们 带 来 意 想不到 的 结果 。 

在 本 附录 中 ， 我 们 将 探讨 如 此 内 容 : 

口 JavaScript 在 其 他 函数 中 定义 函数 的 能 力 ; 
口 传递 函数 对 象 的 方式 ; 

口 在 函数 内 部 和 外 部 定义 的 变量 的 作用 域 ; 
口 由 变量 作用 域 及 闭 包 导 致 的 常见 问题 ; 
口 在 jQuery 中 使 用 函数 ; 

口 函数 交互 导致 的 内 存 问 题 。 








A.1 创建 内 部 函数 


能 够 跻身 支持 内 部 函数 声明 的 编程 语言 行列 , 对 JavaScript 来 说 应 该 算是 一 种 幸运 。 许 多 传统 
的 编程 语言 ( 例如 C ), 都 会 把 全 部 函数 集中 在 顶级 作用 域 中 。 而 支持 内 部 函数 的 语言 ， 则 允许 开 
发 者 在 必要 的 地 方 集合 小 型 实用 函数 ， 以 避免 污染 命名 空间 。 

所 谓 内 部 函数 ， 就 是 定义 在 男 一 个 函数 中 的 函数 。 


代码 清单 A-1 


function outerFn() { 


























function innerFn() { 
4 
} 
innerFn () 就 是 一 个 被 包含 在 outerFn() 作 用 域 中 的 内 部 艺 数 。 这 意味 着 ， 在 outerFn () 
内 部 调用 innerFn () 是 有 效 的 ， 而 在 outerFn () 外 部 调用 innerFn () 则 是 无 效 的 。 下 列 代码 会 
导致 一 个 JavaScript 错 误 。 
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代码 清单 A-2 


function outerFn() { 
console.log('Outer function'); 
function innerFn() { 
console.log('Inner Function'); 
} 
} 


console.log('innerFn():'); 
innerFn(); 


不 过 ， 通 过 在 outerFn () 内 部 调用 innerFn() ， 则 可 以 成 功 地 运行 





代码 清单 A-3 
function outerFn() { 
console.log('Outer function'); 


function innerFn() { 
console.log('Inner function'); 


} 
innerFn(); 


} 
console.log('outerFn():'); 
outerFn(); 


结果 会 产生 如 下 输出 


outerFn(): 
Outer function 
Inner function 


这 种 技术 特别 适合 于 小 型 、 单 用 途 的 函数 。 例 如 ， 递 归 但 却 带 有 非 递归 API 包 装 的 算法 通 
最 适合 通过 内 部 函数 来 表达 。 


A.1.1 在 任何 地 方 调用 内 部 函数 


在 函数 引用 参与 进来 之 后 ， 问 题 就 变 得 复杂 了 。 有 些 语言 ， 比 如 Pascal， 只 人 允许 通过 内 部 也 
数 实现 代码 隐藏， 而且 这 些 函 数 因此 也 会 永远 被 埋没 在 它们 的 父 函 数 中 。 然 而， JavaScript 则 允许 
开发 人 员 像 传递 任何 类 型 的 数据 一 样 传递 函数 。 也 就 是 说 , JavaScript 中 的 内 部 函数 能 够 逃脱 定义 
它们 的 外 部 函数 。 

逃脱 的 方式 有 很 多 种 。 例 如 ， 可 以 将 内 部 函数 指定 给 一 个 全 局 变量 : 
代码 清单 A-4 


var globalVar; 




















function outerFn() { 
console.log('Outer function'); 
function innerFn() { 
console.log('Inner function'); 
} 


globalVar = innerFn; 
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} 

console.log('outerrFn():'); 
outerFn(); 
console.log('globalVar():'); 
globalVar(); 


在 函数 定义 之 后 调用 outerFn () 会 修改 全 局 变 量 globalVar， 此 时 它 引 用 的 是 innerFn ()。 
这 意味 着 , 后 面 调 用 globalvar () 的 操作 就 如 同调 用 innerFn () 一 样 ,也 会 执行 输出 消息 的 语句 : 

outerFn(): 

Outer function 


globalVar (): 
Inner function 


， 此 时 在 outerFn () 外 部 直接 调用 innerFn () 仍然 会 导致 错误 ! 这 是 因为 虽然 内 部 也 
We 了 和 逃脱， 但 这 个 函数 的 名 字 仍 然 被 截留 在 outerFn () 的 作 


用 域 中 。 
男 外 ， 也 可 以 通过 在 父 函 数 中 返回 值 来 “营救 出 ”内 部 函数 的 引用 : 









































代码 清单 A-5 
function outerFn() { 
console.log('Outer function'); 


function innerFn() { 
console.log('Inner function'); 


} 


return innerFn; 


} 

console.log('var fnRef = outerFn():'); 
var fnRef = outerFn(); 
console.log('fnRef():'); 

fnRef (); 


这 里 ， 并 没有 在 outerFn() 内 部 修改 全 局 变量 ， vel 中 返回 了 一 个 对 
innerFn() 的 引用 。 通 过 调用 outerFn () 能 够 取得 这 个 引用 ， 而 且 ， 这 个 引用 可 以 保存 在 变量 
中 ， 也 可 以 自己 调用 自己 ， 从 而 触发 消息 输出 : 


Var fnRef = outerEn() : 
Outer function 
fnRef () : 

Inner function 


这 种 即使 在 离开 函数 作用 域 的 情况 下 仍然 能 够 通过 引用 调用 内 部 函数 的 事实 , 意味 着 只 要 存 
在 调用 这 些 内 部 水 数 的 可 能 ，JavaScript 就 需要 保留 被 引用 的 函数 。 而 且 ，JavaScript 运 行 时 需要 
跟踪 引用 这 个 内 部 函数 的 所 有 变量 , 直至 最 后 一 个 变量 废弃 , JavaScript 的 垃圾 收集 器 才能 出 面 释 
放 相 应 的 内 存 空 间 。 


A.1.2 理解 变量 作用 域 
内 部 函数 当然 也 可 以 拥有 自己 的 变量 ， 只 不 过 这 些 变量 都 被 限制 在 内 部 函数 的 作用 域 中 : 
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代码 清单 A-6 


function outerFn() { 
function innerFn() { 
Var innerVar = 0; 
innerVar++; 
console.log('innerVar = ' + innerVar); 
} 
return innerFn; 
} 
Var fnRef = outerrFn(); 
fnRef (); 
fnRef (); 
Var fnRef2 = outerFn(); 
fnRef2(); 
fnRef2(); 





每 当 通过 引用 或 其 他 方式 调用 这 个 内 部 函数 时 ， 都 会 创建 一 个 新 的 innerVar 变 量 ， 然 后 递 




















增 ， 最 后 显示 : 
innerVar = 1 
innerVar = 1 
innerVar = 1 
innerVar = 1 
内 部 函数 可 以 像 其 他 函数 一 样 引 用 全 局 变量 : 
代码 清单 A-7 
Var globalVar = 0; 
function outerFn() { 
function innerFn() { 
globalVar++; 
console.log('globalVar = ' + globalVar); 
} 
return innerFn; 
} 
Var fnRef = outerrFn(); 
fnRef (); 
fnRef (); 
var fnRef2 = outerFn(); 
fnRef2(); 
fnRef2(); 
现在 ， 每 次 调用 内 部 函数 都 会 持续 地 递增 这 个 全 局 变量 的 值 : 
globalVar = 1 
globalVar = 2 
globalVar = 3 
globalVar = 4 
但 是 ， 如 果 这 个 变量 是 父 函 数 的 局 部 变量 又 会 怎样 呢 ? 因为 内 部 函数 会 继承 父 函 
域 ， 所 以 内 部 函数 也 可 以 引用 这 个 变量 : 
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代码 清单 A-8 


function outerFn() { 
Var OuterVar = 0; 
function innerFn() { 
outerVar++; 
Console.log('outerVar = ' + outerVar); 


} 


return innerFn; 


} 


Var fnRef = outerrFn(); 


fnRef (); 
fnRef (); 


Var fnRef2 = outerrFn(); 


fnRef2 () ; 
fnRef2 () ; 


这 一 次 ， 对 内 部 函数 的 调用 会 产生 有 意思 的 行为 : 


outerVar 
outerVar 
outerVar 
outerVar 





BB 


我 们 看 到 了 前 面 两 种 情况 合成 的 效果 。 通 过 每 个 引用 调用 innerFn() 都 会 独立 地 递增 
































outerVar。 也 就 是 说 ， 第 二 次 调用 outerFn () 没 有 继续 沿用 outervar 的 值 ， 而 是 在 第 二 次 也 
数 调用 的 作用 域 中 创建 并 绑 定 了 一 个 新 的 outervar 的 实例 。 结果 , 就 造成 了 在 上 面 的 代码 中 调 


用 两 次 fnRef ( 








) 之后， 再 调用 fnRef2 () 会 输出 1。 这 两 个 计数 器 完全 是 无 关 的 。 


当 内 部 函数 在 定义 它 的 作用 域 的 外 部 被 引用 时 ， ea 在 这 种 情 


况 下 , 我 们 称 既 不 是 内 部 函数 局 部 变量 , 也 不 是 其 参数 的 变量 为 自 
境 为 封闭 闭 包 的 环境 。 从 本 质 上 讲 ， 如 果 内 部 函数 引用 了 位 于 外 部 函数 中 的 变量 ， 




















量 ， 称 外 部 函数 的 调用 环 
相当 于 授权 该 


变量 能 够 被 延迟 使 用 。 因 此 ， 当 外 部 函数 调用 完成 后 , 这些 变量 的 内 存 不 会 被 释放 ， 因 为 闭 包 仍 
然 需要 使 用 它们 。 


A.2 ”处理 闭 包 之 间 的 交互 








当 存 在 多 个 内 部 函数 时 ， 很 可 能 会 出 现 意 料 之 外 的 闭 包 。 假 设 我 们 又 定义 了 





这 个 函数 中 的 增 量 为 2: 


代码 清单 A-9 


function outerFn() { 
Var outerVar = 0; 
function innerFn1() { 
OuterVar++; 
console.log('(1) outerVar = ' + outerVar); 


} 


function innerFn2() { 
outerVar += 27 
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console.log('(2) outerVar = ' + outerVar); 
} 
return {'fnl': innerFnl, 'fn2': innerFn2}; 
} 
Var fnRef = outerFn(); 
fnRef.fnl(); 
fnRef .fn2(); 
fnRef .fn1()， 
var fnRef2 = OuterEn()， 
fnRef2.fn1(); 
fnRef2.fn2(); 
fnRef2.fn1(); 


这 里 , 我 们 通过 对 象 返回 两 个 内 部 函数 的 引用 (这 也 示范 了 内 部 函数 的 引用 逃脱 父 函 数 的 男 
一 种 方式 )。 可 以 通过 返回 的 引用 调用 任何 一 个 内 部 函数 : 


outerVar 
outerVar 
outerVar 
outerVar 
outerVar 
outerVar 


这 两 个 内 部 函数 引用 了 同一 个 局 部 变量 ， 因 此 它们 共享 同一 个 封闭 环境 。 当 innerFn1 () 为 
outerVar 递 增 1 时 ， 就 为 调用 innerFn2 () 设置 了 outervVazr 的 新 的 起 点 值 ， 反 之 亦 然 。 同 样 ， 
我 们 也 看 到 对 outerFn () 的 后 续 调用 还 会 创建 这 些 闭 包 的 新 实例 ,同时 也 会 创建 相应 的 新 封闭 环 
境 。 面向 对 象 编程 的 爱好 者 们 会 注意 到 , 这 在 本 质 上 是 创建 了 一 个 新 对 象 ， 自 由 变量 就 是 这 个 对 
象 的 实例 变量 ,而 闭 包 就 是 这 个 对 象 的 实例 方法 。 而 且 ， 这些 变 量 也 是 私有 的 ， 因 为 不 能 在 封装 
它们 的 作用 域外 部 直接 引用 这 些 变量 ， 从 而 确保 了 面向 对 象 的 数据 专 有 特性 。 


A.3 在 jQuery 中 创建 闭 包 


我 们 曾经 介绍 过 的 jQuery 库 中 的 许多 方法 都 至 少 要 接收 一 个 函数 作为 参数 。 为 方便 起 见 ， 我 
ee 以 便 在 必需 时 再 定义 函数 的 行为 。 但 是 , 这 也 意味 着 我 们 

少 在 顶级 命名 空间 中 定义 函数 ; 也 就 是 说 , 这 些 函 数 都 是 内 部 函数 ， 而 内 部 函数 很 容易 就 会 变 
We 








改 w 上 必 w 










































































A.3.1 s$(document ) .ready () 的 参数 


我 们 使 用 jQuery 编写 的 几乎 全 部 代码 都 要 放 在 作为 $ (document) .ready () 参 数 的 一 个 函数 

内 部 。 这 样 做 是 为 了 保证 在 代码 运行 之 前 DOM 已 经 就 纤 ， 而 DOM 就 绪 通 常 是 运行 jQuery 代码 的 

一 个 必要 条 件 。 当 创建 了 一 个 函数 并 把 它 传递 给 .readqy() 之 后 ， 这 个 函数 的 引用 就 会 被 保存 为 
全 局 jQuery 对 象 的 一 部 分 。 在 稍 后 的 某 个 时 当 DOM 就 绪 时 ， 这 个 引用 就 会 被 调用 。 

由 于 我 们 通常 把 $ (aocument) .ready () 放 在 代码 结构 的 顶层 ， 因 而 这 个 函数 不 会 成 为 闭 

包 。 但是， 我 们 的 代码 通常 都 是 在 这 个 函数 内 部 编写 的 ， 所 以 这 些 代码 都 处 于 一 个 内 部 函数 中 : 
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代码 清单 A-10 


$s (document) .ready (function() { 
Var readyVar = 0; 


function innerFn() { 
readyVar+t+; 
console.log('readyVar = ' + readyVar); 
} 
innerFn(); 
innerFn(); 


}); 

这 看 上 去 同 前 面 的 很 多 例子 都 差不多 ， 只 不 过 外 部 函数 是 传人 到 $ (document) .ready() 中 
的 一 个 回调 函数 。 由 于 innerFn () 定义 在 这 个 回调 函数 中 , 而 且 引用 了 位 于 回调 函数 作用 域 中 的 
readyVar， 因 此 innerFn () 及 其 环境 就 创建 了 一 个 闭 包 。 我 们 两 次 调用 这 个 内 部 函数 ， 通 过 观 
察 两 次 输出 之 间 保 持 的 readyvVar 的 值 ， 就 可 以 证 明 这 一 点 : 


1 
2 

















readyVar 
readyVar 


把 大 多 数 jQuery 代码 都 放 在 一 个 函数 体 中 是 很 有 用 的 ， 因 为 这 样 可 以 避免 某 些 命名 空间 冲 
突 。 例 如 , 正 是 这 个 特性 可 以 使 我 们 通过 调用 jouery.noconflict () 为 其 他 库 释 放 简 写 方式 $， 
但 我 们 仍然 能 够 定义 在 $ (document) .ready () 中 使 用 的 局 部 简写 方式 。 


A.3.2 ” 绑 定 事件 处 理 程 序 


.ready () 结构 通常 用 于 包装 其 他 的 jQuery 代码 ， 包 括 事件 处 理 程序 的 赋值 。 因 为 处 理 程序 
是 函数 ,它们 也 就 变 成 了 内 部 函数 ; 而 且 ， 因 为 这 些 内 部 函数 会 被 保存 并 在 以 后 调用 ， 于 是 它们 
也 会 创建 闭 包 。 以 一 个 简单 的 单 击 处 理 程序 为 例 : 


代码 清单 A-11 
$s (document) .ready (function() { 
Var counter = 0; 
$('#button-1') .click (function(event) { 
event .preventDefault(); 
Counter++; 
console.log('counter = ' + Counter); 
3 
1 


由 于 变量 counter 是 在 .ready () 处 理 程序 中 声明 的 ， 所 以 它 只 对 位 于 这 个 块 中 的 jQuery 代 
码 有 效 , 对 .ready () 处 理 程序 外 部 的 代码 无 效 。 然 而 , 这 个 变量 可 以 被 . click () 处 理 程序 中 的 
代码 引用 ， 在 这 个 例子 中 .click () 应 用 程序 会 递增 并 显示 该 变量 的 值 。 由 于 创建 了 闭 包 ， 每 次 
单 击 按钮 都 会 引用 counter 的 同一 个 实例 。 也 就 是 说 , 消息 会 持续 显示 一 组 递增 的 值 ， 而 不 是 每 
次 都 显示 1。 
























































counter = 1 
counter = 2 
counter = 3 
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事件 处 理 程序 同 其 他 函数 一 样 ， 也 能 够 共享 它们 的 封闭 环境 : 
代码 清单 A-12 


$s (document) .ready (function() { 
Var counter = 0; 
$('#button-1') .click(function(event) { 
event .preventDefault(); 
Counter+t++; 
console.log('counter = ' + counter); 
ys 
$('#button-2') .click(function(event) { 
event .preventDefault () 
Counter--; 
console.log('counter = ' + counter); 
}); 
六 


因为 这 两 个 函数 引用 的 是 同一 个 变量 counter, 所 以 两 个 链接 的 递增 和 递减 操作 会 影响 同一 
个 值 ， 而 不 是 各 自 独立 的 值 。 





counter = 1 
counter = 2 
counter = 1 
counter = 0 


A.3.3 在 循环 中 绑 定 处 理 程序 


鉴于 闭 包 的 独特 运行 方式 , 在 循环 中 绑 定 处 理 程序 需要 一 些 特殊 的 技巧 。 假 设 我 们 想 在 一 个 
循环 中 创建 多 个 元 素 ， 然 后 基于 循环 的 索引 为 这 些 元 素 绑 定 行为 : 


代码 清单 A-13 


$s(document) .ready (function() { 
for (var i = 0; i < 5; i++) { 
s('<div>Print ' + i + '</div>') 
.Click(function() { 
console.1log(i); 
}) .insertBefore('#results'); 
} 
3 


变量 i 依次 被 设置 为 0 ~4， 而 每 次 循环 都 会 创建 一 个 新 的 <aiv> 元 素 。 每 个 新 元 素 都 有 一 个 
不 同 的 文本 标签 : 


Print 0 
Print 1 
Print 2 
3 
4 





Print 
Print 


你 可 能 会 认为 单 击 其 中 一 项 会 看 到 相应 的 编号 出 现在 控制 台中 。 可是, 单 击 页 面 中 的 任何 一 
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个 元 素 都 会 显示 数值 5。 换 句 话 说， 即使 在 绑 定 处 理 程 序 时 :的 值 每 次 都 不 一 样 ， 每 个 cLick 处 理 
程序 最 终 引 用 的 i 都 相同 ， 都 等 于 单 击 事件 实际 发 生 时 i 的 最 终 值 (5 )。 

解决 这 个 问题 的 方式 有 很 多 。 首 先 ， 可 以 使 用 jQuery 的 $ .eacn () 函数 来 代替 for 循 环 : 
代码 清单 A-14 


$s (document) .ready (function() { 





$.each([0, 1, 2, 3, 4], function(index, value) { 
$s('<div>Print ' + value + '</div>') 
‘Click(function() + 
console.log(value); 
}) .insertBefore('#results'); 
于 
}) 3 


因为 函数 的 参数 类 似 于 在 函数 中 定义 的 变量 ， 所 以 每 次 循环 的 value 实 际 上 都 是 不 同 的 变 


量 。 结 果 ， 每 个 click 处 理 程序 都 指向 一 个 不 同 的 value 变 量 ， 因 而 每 次 单 击 输出 的 值 会 与 元 素 
的 标签 文本 匹配 。 


同样 利用 函数 参数 的 这 个 特性 ， 不 必 使 用 $ .each () 也 可 以 解决 这 个 问题 。 在 fo 循环 内 部 ， 
可 以 定义 并 执行 一 个 新 函数 ， 让 它 负 责 把 变量 i 的 值 分 配 到 不 同 的 变量 中 去 : 


代码 清单 A-15 


$s (document) .ready (function() { 
£6 (var HH SS 0; < 5 于 + A 
(function(value) { 
$s('<div>Print ' + value + '</div>') 
.click(function() { 
console.log(value); 
}) .insertBefore('#results'); 
}) (i); 
} 
小 ) 3 


这 种 结构 我 们 在 第 8 章 看 到 过 ， 它 的 名 字 叫 立即 调用 的 函数 表达 式 (IIFE )， 前 面 曾 在 调用 
$.noconflict() 之 后 利用 它 为 Jouery 对 象 重 新 定义 别名 $。 在 这 里 ， 我 们 利用 它 将 1 传 给 变量 
value， 以 便 value 在 每 个 单 击 处 理 程序 中 都 有 不 同 的 值 。 

最 后 ， 还 可 以 使 用 jQuery 的 事件 系统 换个 角度 来 解决 这 个 问题 。 我 们 知道 ，. on () 方 法 接受 
一 个 对 象 参 数 ， 该 参数 以 event .data 的 形式 传人 事件 处 理 程序 中 : 


代码 清单 A-16 


s(dqocument) .ready (function() { 
for (var 14 = 0; 14 < 5; I++) { 
(TdivSpPrirt A ) 
.on('click', {value: i}, function(event) { 
console.log(event .data.value); 
}) .insertBefore('#results'); 
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在 这 里 ， 我 们 将 i 作为 .on() 方 法 的 数据 ， 而 在 事件 处 理 程序 内 部 ， 能 够 通过 event. 
data.value 取 得 它 的 值 。 同 样 ， 因 为 event 是 函数 的 参数 ， 每 次 调用 处 理 程序 时 它 都 是 一 个 独 
立 的 实例 ， 而 不 是 在 所 有 调用 中 共享 的 个 值 。 


A.3.4 命名 及 匿名 函数 


这 些 例 子 都 和 我 们 常规 的 jQuery 代码 一 样 使 用 了 匿名 函数 。 但 是 , 这 不 会 影响 到 闭 包 的 创建 。 
换 句 话说 ， 无论 命 名 函数 还 是 匿名 函数 ， 都 可 以 用 来 创建 闭 包 。 例如 ， be 个 匿名 函 
数 ， 报 告 jQuery 对 象 中 每 个 <input> 按 钮 的 索引 : 


代码 清单 A-17 









































$s (document) .ready (function() { 
$s('input') .each(function(index) { 
s(this).click(function(event) { 
event .preventDefault(); 
console.log('index = ' + index); 


})3 
学 
3} 


由 于 最 里 面 的 函数 是 在 .each () 回调 函数 中 定义 的 , 因而 以 上 代码 实际 上 创建 了 同 存在 的 按 
钮 一 样 多 的 函数 。 这 些 函 数 分 别 作为 一 个 单 击 处 理 程序 被 添加 给 了 相应 的 按钮 。 而 且 ， 由 
于 .each () 回调 函数 拥有 参数 indaex， 所 以 在 这 些 函 数 的 封闭 环境 中 都 有 各 自 的 indqex 变 量 。 这 
就 如 同 把 单 击 处 理 程序 的 代码 写成 一 个 命名 函数 : 


代码 清单 A-18 


$s (document) .ready (function() { 
$s('input') .each(function(index) { 
function clickHandler(event) { 
event .preventDefault(); 
console.log('index = ' + index); 


} 


$s(this) .click(clickHandler); 
学 
和 


只 不 过 使 用 匿名 函数 的 版 本 更 短 一 些 而 已 。 然 而 , 这 个 命名 函数 的 位 置 也 是 很 重要 的 。 比 如， 
以 下 代码 会 在 按钮 被 单 击 时 触发 JavaScript 错 误 : 


代码 清单 A-19 


$s(document) .ready (function() { 

function clickHandler (event) 
event .preventDefault(); 

console.log('index = ' + index); 


} 











{ 
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$('input') .each(function(index) { 
s(this) .click(clickHandler); 
3 
}) > 


之 所 以 会 触发 JavaScript 错 误 , 是 因为 在 cl1ickHandler () 的 封闭 环境 中 找 不 到 index。 此 时 ， 
index 仍 然 是 一 个 自由 变量 ， 但 它 在 这 个 环境 中 没有 定义 。 


A.4 应 对 内 存 泄漏 的 风险 


JavaScript 使 用 一 种 称 为 垃圾 收集 的 技术 来 管理 分 配给 它 的 内 存 。 这 与 C 这 样 的 低级 语言 不 
同 ，C 要 求 程 序 员 明确 地 预定 内 存 空 间 ， 并 在 这 些 内 存 不 再 使 用 时 释放 它们 。 其 他 语言 ， 比 如 
Objective-C， 实 现 了 一 个 引用 计数 系统 来 辅助 程序 员 完 成 这 些 工 作 。 通 过 这 个 引用 计数 系统 ， 程 

序 员 能 够 了 解 到 有 多 少 个 程序 块 使 用 了 一 个 特定 的 内 存 段 ， 因 而 可 以 在 不 需要 时 清除 这 些 内 存 

段 。 男 一 方面 ，JavaScript 是 一 种 高 级 语言 ， 它 一 般 是 通过 后 台 来 维护 这 种 计数 系统 。 

当 JavaScript 代 码 生 成 一 个 新 的 内 存 驻 留 项 时 ( 比如 一 个 对 象 或 函数 )， 系 统 就 会 为 这 个 项 留 
出 一 块 内 存 空间 。 因 为 这 个 对 象 可 能 会 被 传递 给 很 多 函数 ,并 且 会 被 指定 给 很 多 变量 ， 所 以 很 多 
代码 都 会 指向 这 个 对 象 的 内 存 空间 。JavaScript 会 跟踪 这 些 指针 ， 当 最 后 一 个 指针 废弃 不 用 时 ,这 
个 对 象 占用 的 内 存 会 被 释放 。 以 图 A-1 中 的 指针 链接 为 例 。 


图 A-l 


图 中 1 一 个 属性 指向 B， 而 B 也 有 一 个 属性 指向 C。 即 使 当前 作用 域 中 只 有 对 和 象 A 有 
效 , 但 由 于 指针 的 关系 所 有 3 个 对 象 都 必须 保留 在 内 存 中 。 当 离开 A 的 当前 作用 域 时 例如 代码 
执行 到 声 1 函数 的 末尾 处 )， 垃 圾 收集 器 就 可 以 释放 A 占 用 的 内 存 。 此 时 ,由 于 没有 什么 指向 
B， 因 此 B 可 以 释放 ， 最 后 ，C 也 可 以 释放 。 

然而 ， 当 对 象 间 的 引用 关系 变 得 复杂 ( 如 图 A-2 所 示 ) 时 ， 处 理 起 来 也 会 更 加 困难 。 


CA Se 
图 A-2 


这 里 ， 我 们 又 为 对 象 C 添 加 了 一 个 引用 B 的 属性 。 在 这 种 情况 下 ， 当 A 释 放 时 ， 仍 然 有 来 自 C 
的 指针 指向 B。 这 种 引用 循环 需要 由 JavaScript 进 行 特殊 的 处 理 , 但 必须 考虑 到 整个 循环 与 作用 域 
中 的 其 他 变量 已 经 处 于 隔离 状态 
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A.4.1 避免 意外 的 引用 循环 


闭 包 可 能 会 导致 在 不 经 意 间 创 建 引用 循环 。 因 为 函数 是 必须 保存 在 内 存 中 的 对 象 , 所 以 位 于 
函数 封闭 环境 中 的 所 有 变量 也 需要 保存 在 内 存 中 


代码 清单 A-20 


function outerFn() { 
var outerVar = {}; 
function innerFn() { 
console.log(outerVar); 
} 
outerVar.fn = innerFn; 
return innerFn; 


和 

这 里 创建 了 一 个 名 为 outerVar 的 对 象 ， 该 对 象 在 内 部 函数 innerFn () 中 被 引用 。 然 后 ， 为 
outerVazr 创 建 了 一 个 指向 innerFn () 的 属性 , 之 后 返回 了 ;innerFn() 。 这 样 就 在 innerEFn () 上 
创建 了 一 个 引用 outervar 的 闭 包 ,而 outerVar 又 引用 了 innerFn()。 

这 会 导致 变量 在 内 存 中 存在 的 时 间 比 想象 得 还 要 长 ,而 且 又 不 容易 被 发 现 。 但 是 , 也 可 能 会 
出 现 比 这 种 情况 更 隐蔽 的 引用 循环 : 


代码 清单 A-21 


function outerFn() { 
var outerVar = {}; 
function innerFn() { 
console.log('hello'); 
} 
outerVar.fn = innerFn; 
return innerFn; 


上 

这 里 我 们 修改 了 innerFn ()， 使 它 不 再 引用 outervar。 但 是 ， 这 样 做 仍然 没有 断 开 循环 。 
即使 innerFn () 不 再 引用 outervar ，outerVar 也 仍然 位 于 innerFn () 的 封闭 环境 中 。 由 于 闭 
包 的 原因 ， 位 于 outerEn () 中 的 所 有 变量 都 隐 含 地 被 innerFn () 所 引用 。 因 此 ， 闭 包 会 使 意外 
地 创建 这 些 引 用 循环 变 得 易如反掌 
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A.4.2 控制 DOM 与 JavaScript 的 循环 


上 述 这 些 情 况 通 常 不 是 什么 问题 ,因为 JavaScript 能 够 检测 到 这 些 情况 并 在 它们 孤立 时 将 其 清 
除 。 然 而 ， 旧 版 本 正中 存在 一 种 难以 处 理 的 引用 循环 问题 。 当 一 个 循环 中 同时 包含 DOM 元 素 和 
常规 JavaScript 对 象 时 ,IE 无 法 释放 任何 一 个 对 象 为 这 两 类 对 象 是 由 不 同 的 内 存 管理 程序 负 
责 管理 的 。 换 句 话说， 除非 关闭 浏览 器 ， 和 否则 这 种 循环 在 卫 中 永远 得 不 到 释放 。 为 此 ， 随 着 时 间 
的 推移 , 这 可 能 会 导致 大 量 内 存 被 无 效 地 占用 。 导 致 这 种 循环 的 一 个 常见 原因 是 简单 的 事件 处 理 
程序 : 
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代码 清单 A-22 
$s (document) .ready (function() { 
Var button = document .getElementById('button-1'); 
button.onclick = function() { 
console.log('hello'); 
return false; 
}3 
二 
当 指 定单 击 事件 处 理 程序 时 ， 就 创建 了 一 个 在 其 封闭 的 环境 中 包含 putton 变 量 的 闭 包 。 而 
且 ， 现 在 的 button 也 包含 一 个 指向 闭 包 (onclick 属 性 自身 ) 的 引用 。 这 样 ， 就 导致 了 在 IE 中 
即使 离开 当前 页 面 也 不 会 释放 这 个 循环 。 
为 了 释放 内 存 ， 就 需要 断 开 循环 引用 , 例如 在 关闭 窗口 关 删 除 onclick 属 性 (此 时 必须 注意 
不 要 在 window 及 其 onunload 处 理 程序 间 引 入 新 的 循环 )。 男 外 ， 也 可 以 像 下 面 这 样 重 写 代码 来 
避免 这 种 闭 包 : 


代码 清单 A-23 


function hello() { 
console.log('hello'); 
return false; 
} 
$s (document) .ready (function() { 
Var button = document .getElementById('button-1'); 
button.onclick = hello; 
用， 


因为 hello () 函数 不 再 包含 button， 引 用 就 成 了 单 向 的 (从 button 到 hello )、 不 存在 的 
循环 ， 所 以 就 不 会 造成 内 存 泄 漏 了 。 

用 jQuery 化 解 引用 循环 

下 面 ， 我 们 通过 常规 的 jQuery 结构 来 编写 同样 的 代码 : 









































代码 清单 A-24 
$s (document) .ready (function() { 
var Sbutton = $('#button-1'); 
Sbutton.click(function(event) { 
event .preventDefault (); 
console.log('hello'); 
1 
即使 此 时 仍然 会 创建 一 个 闭 包 ,并且 也 会 导致 同 前 面 一 样 的 循环 , 但 这 里 的 代码 却 不 会 使 IE 
发 生 内 存 泄漏 。 由 于 jQuery 考虑 到 了 内 存 泄漏 的 潜在 危害 ， 所 以 它 会 手动 释放 自己 指定 的 所 有 事 
件 处 理 程序 。 只 要 坚持 使 用 jQuery 的 事件 绑 定 方法 ， 就 无 需 为 这 种 特定 的 常见 原因 导致 的 内 存 泄 
漏 而 担心 。 
但 是 ， 这 并 不 意味 着 我 们 完全 脱离 了 险 境 。 当 对 DOM 元 素 进行 其 他 操作 时 ， 仍 然 要 处 处 留 
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心 。 只 要 是 将 JavaScript 对 象 指定 给 DOM 元 素 ， 就 可 能 在 旧版 本 正中 导致 内 存 泄 漏 。jQuery 只 是 
有 助 于 减少 发 生 这 种 情况 的 可 能 性 。 

有 鉴于 此 ，jQuery 为 我 们 提供 了 男 一 个 避免 这 种 泄漏 的 工具 。 在 第 12 章 中 我 们 曾 看 到 过 ,使 
用 .data() 方 法 可 以 像 使 用 扩展 属性 (expando) 一 样 ， 将 信息 附加 到 DOM 元 素 。 由 于 这 里 的 数 
据 并 非 直 接 保存 在 扩展 属性 中 (jQuery 使 用 一 个 内 部 对 象 并 通过 它 创建 的 ID 来 保存 这 里 所 说 的 数 
据 )， 因 此 永远 也 不 会 构成 引用 循环 ， 从 而 有 效 回避 了 内 存 泄漏 问题 。 无 论 什 么 时 候 ， 当 我 们 觉 
得 扩展 属性 好 像 是 一 种 方便 的 数据 存储 机 制 时 ， 都 应 该 首选 .aata() 这 种 更 安全 可 靠 的 替代 
方案 。 














A.5 小 结 


JavaScript 闭 包 是 一 种 强大 的 语言 特性 。 通过 使 用 这 个 语言 特性 来 隐藏 变量 , 可 以 避免 覆盖 其 
他 地 方 使 用 的 同名 变量 。 由 于 jQuery 经 常 依赖 于 把 函数 作为 方法 的 参数 ， 所 以 在 编写 jQuery 代码 
时 也 会 经 常 在 不 经 意 间 创建 闭 包 。 理解 闭 包 有 助 于 编写 出 更 有 效 也 更 简洁 的 代码 , 如 果 再 加 上 
些小 心 并 利用 好 jQuery 内 置 的 安全 措施 ， 则 可 以 有 效 地 防止 闭 包 可 能 引发 的 内 存 泄 漏 问题 。 
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本 书包 含 了 很 多 JavaScript 代 码 ， 也 展示 了 使 用 jQuery 简化 代码 编写 工作 的 各 种 方式 。 可 是 ， 
在 添加 了 新 功能 之 后 ,就 必须 手工 检测 网 页 ， 以 验证 一 切 都 按照 预期 运行 。 虽然 这 种 方式 对 于 简 
单 的 任务 来 说 没有 问题 , 但 随 着 项 目 规模 的 增 大 以 及 复杂 性 的 增加 , 手工 测试 就 会 暴露 出 诸多 不 
足 。 新 的 需求 可 能 会 引入 “回归 bug”， 从 而 让 之 前 工作 得 好 好 的 脚本 发 生 中 断 。 由 于 这 些 bug 并 
不 都 跟 最 后 一 次 修改 有 关 , 所 以 查找 起 来 可 不 是 件 容易 的 事 儿 ， 毕 竞 我 们 一 般 只 会 测试 刚刚 写 过 
的 代码 。 

实际 上 , 在 这 种 情况 下 我 们 就 需要 一 个 自动 化 的 系统 ,让 它 来 帮 我 们 运行 测试 。 本 附录 要 介 
绍 的 QUnit 就 是 这 样 一 个 测试 框架 。 虽然 也 有 很 多 其 他 各 具 特 色 的 测试 框架 ,但 我 们 还 是 推荐 大 
家 在 自己 的 项 目 中 使 用 QUnit， 因 为 这 个 框架 是 由 jQuery 团队 编写 和 维护 的 。 事实 上 , jQuery 本 身 
也 是 使 用 QUnit 来 测试 的 〈 差不多 要 执行 6500 个 测试 ! )。 

本 附录 将 介绍 如 下 内 容 : 

口 如 何在 项 目 中 配置 QUnit 测 试 框架 ; 

口 组 织 单元 测试 以 提高 覆盖 率 和 可 维护 性 ; 
口 QUnit 中 不 同类 型 的 测试 ; 

口 确保 有 效 测 试 的 最 佳 实践 ; 

口 QUnit 之 外 的 其 他 测试 。 


B.1 下 载 QUnit 


可 以 在 官方 网 站 下 载 RUnit 框 架 ， 地 址 为 : http://qunitjs.com/。 网 站 上 有 稳定 版 ( 当前 版 本 号 
为 1.11.0 ) 和 开发 版 (qunit-git ) 可 供 下 载 。 这 两 个 版 本 除 JavaScript 文 件 外 ， 都 包含 一 个 用 于 格式 
化 输出 的 样式 表 。 


B.2 设置 文档 
下 载 了 QUnit 文 件 之 后 ， 接 下 来 要 设置 HTML 测 试 文档 。 在 典型 的 项 目 中 ， 这 个 文件 叫 


index.html， 而 且 与 qunitjs 和 qunit.css 放 在 相同 的 测试 文件 夹 中 。 不 过 ,我 们 这 里 把 这 个 测试 文件 
放 在 一 个 父 目 录 中 。 
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这 个 文档 的 <neag> 元 素 中 包含 一 个 <1ink> 标 签 ， 用 于 链接 CSS 文 件 ; 还 包含 几 个 
<script> 标 签 ， 用 于 加 载 jQuery、QUnit、 要 测试 的 JavaScript 文 件 ( B.js )， 以 及 测 oe 
( test/test.js )。 文档 的 <body> 标 签 中 包含 两 个 主要 元 素 , 每 个 元 素 的 ID 将 由 QUnit 用 来 运行 测 六 
和 显示 结果 。 

为 了 演示 QUnit， 我 们 会 使 用 第 2 章 和 第 6 章 中 的 一 些 例子 。 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Appendix B Tests</title> 
<link rel="stylesheet" href="qunit.css" media="screen'"> 
<script src="jquery.js"></script> 
<script src="test/gqunit.js"></script> 
<script src="B.js"></script> 
<script src="test/test.js"></script> 
</head> 
<body> 
<div id="gqunit"></div> 
<div id="qunit-fixture"> 
<!-- 要 测试 的 标记 放 在 这 里 --> 
</div> 
</body> 
</html> 


因为 第 2 章 的 代码 要 根据 相应 的 DOM 进 行 测试 , 所 以 测试 文档 中 的 标记 应 该 与 实际 页 面 中 的 
标记 符合 。 可 以 从 第 2 章 中 使 用 的 HTML 文 档 中 把 相应 标记 复制 过 来 ， 蔡 换 掉 这 里 的 注释 
“<!1-- 要 测试 的 标记 放 在 这 里 -->”。 


B.3 组 织 测试 


QUnit 提 供 两 个 级 别 的 分 组 ,分 别 以 它们 的 函数 调用 命名 :module () 和 test () 。 其 中 ,module 
类 似 于 通用 的 类 别 ， 测 试 将 在 该 类 别 下 运行 ; ne le 试 ， 在 这 些 
回调 函数 中 运行 相应 测试 的 特定 单元 测试 。 在 这 里 ， 我 们 要 把 测试 按照 每 一 章 的 主题 组 织 起 来 ， 
把 代码 放 到 test/test.js 文 件 中 : 


代码 清单 B-1 


module('Selecting'); 

test('Child Selector', function() { 
ok(true, 'Placeholder is entered'); 

让 

test('Attribute Selectors', function() { 
ok(true, 'Placeholder is entered'); 

有 


module('Ajax'); 


虽然 不 一 定 非 要 把 测试 文件 按照 这 个 测试 结构 来 组 织 , 但 最 好 还 是 对 整个 结构 有 一 个 大 致 的 


网 
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概念 。 除了 mogdule () 和 test () 之 外 , 我 们 还 在 每 个 测试 中 插入 了 一 个 断言 占 位 语句 。 即 便 有 一 
个 断言 测试 失败 ，QUnit 都 会 抛 出 错误 。 

因为 QUnit 默 认 会 在 文档 加 载 完 成 之 后 才 会 运行 测试 ， 所 以 我 们 的 模块 还 有 测试 都 不 需要 放 
在 $ (document) .ready () 调 用 中 。 经 过 这 一 步 简单 的 设置 ， 然 后 加 载 测试 用 的 HTML 页 面 ， 就 
会 得 到 图 B-1 所 示 的 结果 。 


Appendix B Tests 


口 Hide passed tests 六 Check for Globals [No try-catch Module: | < All Modules > :| 


Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML; fke Gecko) 
Chrome/25.0.1364.172 Safari/537.22 











Tests completed in 73 miliseconds. 
2 assertions of 2 passed, 0 failed. 


Selecting: Child Selector (0, 1, 1) 
Selecting; Attribute Selectors (0, 1, 1) 














图 B-l 


中 的 模块 名 是 以 浅 蓝 色 罕 出 显示 的 ， 而 测试 名 则 以 次 蓝 色 显 示 。 单 击 任何 一 个 测试 都 会 展 
示 该 组 测试 的 结果 ; 这 些 结果 在 全 部 通过 ( 或 在 这 里 并 没有 测试 ) 的 情况 下 , 默认 是 折 笃 起 来 的 。 
没有 出 现 Ajax 模块 是 因为 还 没有 给 它 写 测试 呢 。 


B.4 添加 和 运行 测试 


在 测试 驱动 的 开发 中 ,需要 在 编写 代码 之 前 编写 测试 。 这 样 一 来 ,在 看 到 测试 失败 之 后 , 开 
始 添 加 新 的 代码 ， 然 后 再 让 测试 通过 ， 验 证 新 代码 实现 了 应 有 的 功能 。 
首先 ， 我 们 来 测试 第 2 章 用 到 的 子 选择 符 ， 为 <ul ig="selected-plays"> 的 所 有 子 元 素 


<1i> 添 加 horizontal 类 : 


代码 清单 B-2 


test('Child Selector', function() { 

expect (1); 

Var topLis = $('#selected-plays > li.horizontal'); 

equal (topLis.length, 3, 'Top LIs have horizontal class'); 
3 


这 里 实际 上 加 入 了 两 个 测试 。 第 一 个 是 expect () 测试 , 它 告诉 QUnit 我 们 想 在 这 个 测试 集 
中 运行 多 少 个 测试 。 然后， 因为 我 们 想 要 测试 在 页 面 中 选择 元 素 的 能 力 ， 所 以 使 用 equal () 测 
试 来 比较 顶级 <1i> 元 素 与 数值 3。 如 果 这 两 个 值 相等 ,测试 通 过 且 通 过 的 次 数 会 加 1， 如 图 B-2 
所 示 。 
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Appendix B Tests 


口 Hide passed tests [Check for Globals [DD No try-catch Module; | < All Modules > ;| 


Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML, like Gecko) 
Chrome/25.0.1964.172 Safail/537.22 


Tests completed in 41 miliseconds. 
1 assertions of 2 passed, 1 failed. 








1. Top Lls have horizontal class 
3 


0 
iff: 30 
at Object.<anonymous> 
(http://boox.dev/3145/B/test/test.js:12:3) 








2. Salecting; Attribute Selectors (0, 1, 1) 








图 B-2 


之 所 以 这 个 测试 失败 ， 是 因为 我 们 还 没有 编写 代码 去 添加 horizontal 类 。 添 加 这 个 类 的 代 
码 很 简单 ， 我 们 把 它 写 在 页 面 中 包含 的 名 为 B.js 的 主 脚本 文件 中 : 


代码 清单 B-3 


$s(document) .ready (function() { 
$('#selected-plays > 1i').addClass('horizontal'); 
})3 


再 次 运行 测试 ， 就 通过 了 ， 如 网 B-3 所 示 。 


Appendix B Tests 


口 Hide passed tests ,Check for Globals DD No try-catch Module: | < All Modules> :| 


Mozila/5.0(Macintoshy Intal MacOSX10.8 .3) AppleWebKit/537.22【KHTML ke Gecko) 
Chrome/25.0.1964.172 Safari/537.22 


Tests completed in 53 miliseconds. 
2 assertions of 2 passed, 0 failed. 





|. Selecting: Child Selector (0, 1, 1) 
1 Top Lls have horizontal class 


2. Selecting: Attribute Selectors (0, 1, 1) 











图 B-3 


现在 ，Selecting:Child Selector 测 试 在 括号 里 显示 数字 0,1,1， 表 示 没 有 失败 ， 总 共 1 个 测试 ， 
通过 了 1 个 测试 。 下 面 我 们 再 添加 两 个 对 属性 选择 符 的 测试 : 
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代码 清单 B-4 


module('Selecting', { 
setup: function() { 
this.topLis = $('#selected-plays > li.horizontal'); 
} 
四) 过 
test('Child Selector', function() { 
expect (1) ; 
equal (this.topLis.length, 3, 
'Top LIs have horizontal class'); 
}); 
test('Attribute Selectors', function() { 
expect (2); 
ok(this.topLis.find(' .mailto').length == 1, '‘'a.mailto'); 
equal (this.topLis.find(' .pdflink').length, 1, 'a.pdflink'); 
}); 


这 里 又 引入 了 另 一 种 测试 方式 : 这 个 测试 接收 两 个 参数 : 一 个 应 该 被 求 值 为 true 的 
表达 式 和 一 个 描述 。 同 样 ， i ee 量 从 代码 清单 B-2 中 的 Child Selector 测 试 转 
移 到 了 模块 的 setup () 回调 函数 中 。mogdule () 接收 可 选 的 第 二 个 参数 ， 这 个 参数 是 一 个 对 象 ， 
可 以 包含 setup () 和 teardovwn () 函数 。 在 这 两 个 函数 中 ,可 以 使 用 this 关 键 字 为 模块 中 的 所 有 
测试 一 次 性 地 指定 变量 。 

同样 ， 由 于 没有 编写 相应 的 代码 ， 新 测试 也 会 失败 : 





1. a.maito 


at Object.<anonymous> 


(http://book.dev/3145/B/listings/B8.4.js:21:3) 








图 B-4 


在 此 ， 我们 看 到 了 ok() 测试 和 equal () 测试 失败 时 不 同 的 输出 。 前 者 只 显示 测试 的 标签 
( a.mailto ) 和 来 源 , 后 者 还 会 详细 列 出 期 待 的 结果 。 鉴 于 equal () 比 ok () 提供 的 测试 失败 的 细节 
更 多 ， 因 此 应 该 优先 使 用 它 。 

下 面 我 们 要 在 脚本 中 添加 必要 的 代码 : 


代码 清单 B-5 


$s(document) .ready (function() { 
$('#selected-plays > 1i').addClass('horizontal'); 
$('a[lhref^="mailto:"]').addCclass('mailto'); 
$('a[lhref$=".pdf"]').addCclass('pdflink'); 

})3 
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如 图 B-5 所 示 ， 这 两 个 测试 都 通过 了 





Attribute Selectors (0, 2, 分 


1. a.maito 


2. a.pdfink 











图 B-5 


虽然 失败 的 equal () 测试 比 失败 的 ok () 测试 提供 的 信息 更 详尽 ， 但 测试 通过 后 两 者 都 只 显 
示 测 试 标 签 。 





异步 测试 


测试 异步 JavaScript， 比 如 Ajax 请 求 ， 对 我 们 来 说 又 是 一 个 挑战 。 挑 战 的 核心 在 于 当 异 步 测试 
开始 时 ， 测 试 必须 暂停 ;而 当 异 步 请 求 完成 时 ， 测 试 必须 恢复 。 这 种 情况 我 们 还 是 比较 熟悉 的 ， 
在 效果 队列 、Ajax 回 调 函 数 以 及 承诺 对 象 中 ， 都 存在 这 种 异步 操作 。 在 QUnit 中 ， 我 们 要 使 用 一 
个 特殊 的 测试 集 ， 它 的 名 字 叫 asyncTest () 。 这 个 测试 集 与 常规 的 test () 测试 集 很 相似 ; 不 同 
的 是 ， 在 我 们 调用 一 个 特殊 的 start () 函数 恢复 它们 之 前 ， 它 们 会 暂停 运行 


代码 清单 B-6 


asyncTest('JSON', function() { 
$.getJSON('b.json', function(json, textStatus) { 
// 在 这 里 添加 测试 
}) .always (function() { 
Start()s 
jy 
这 


里 只 是 简单 地 在 B.js 中 请 求 了 JSON 数 据 ， 青 求 完成 一 一 无 论 成 功 还 是 失败 时 继续 进行 
测试 es always ( ) 回调 也 数 中 调用 start () )。 在 实际 的 测试 中 ， 需 要 检测 textStatus 
以 确定 请 求 成 功 ， 然 后 像 下 面 这 样 检查 响应 的 JSON 数 组 中 的 一 个 对 象 的 值 : 


代码 清单 B-7 


asyncTest('JSON', function() { 
expect (2) ; 
Var backbite = { 
"term"s: "BACKBITE", 
Mar Vey: tT; 
"definition": "To speak of a man as you find him when he can't find you." 
jy 
$.getJSON('b.json', function(json, textStatus) { 
equal (textStatus, 'success', 'Request successful'); 
deepEqual (json[1], backbite, 
'result array matches "backbite" map'); 
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}) .always (function() { 
Start()y 
已 
}) > 


为 了 测试 啊 应 的 值 ， 这 里 又 使 用 了 一 个 函数 : deepEqual ()。 正 常情 况 下 ， 在 比较 两 个 对 
象 时 ,除非 它们 引用 的 是 相同 的 内 存 地 址 , 否则 不 会 判定 它们 相等 。 但 如 果 我 们 想 比 较 的 是 它们 
的 内 容 ， 那么 使 用 deepEqual () 很 合适 。 这 个 函数 会 遍历 两 个 对 象 ， 确 保 它 们 拥有 相同 的 属性 ， 
而 且 每 个 属性 都 有 相同 的 值 。 


B.5 其 他 测试 类 型 


QUnit 也 提供 了 其 他 一 些 测试 函数 。 有 一 些 函 数 ， 比 如 notEqual () 和 notDeepEqual() 只 
不 过 是 我 们 用 过 的 函数 的 首 运 算 , 而 另外 一 些 函 数 ， 比 如 strictEqual () 和 throws () 则 具有 更 
加 特定 的 用 途 。 有 关 这 些 孙 数 的 更 多 信息 ， 以 及 有 关 QUnit 的 更 多 细节 和 示例 ,请 参考 QUnit 网 站 
( http://qunitjs.com/ ) 以 及 QUnit API 网 站 ( http://api.qunitjs.com/ )。 




















B.6 最 佳 实践 


本 附录 中 展示 的 示例 都 非常 简单 ,这 一 点 相信 读者 是 可 以 理解 的 。 但 在 实际 测试 当中 ,有 可 
能 要 编写 测试 代码 来 验证 一 些 非常 复杂 的 行为 是 否 正确 。 

理想 情况 下 , 应 该 尽量 保持 测试 代码 简单 ， 即 便 是 要 测试 的 行为 比较 复杂 , 也 要 尽力 把 代码 
写 得 简单 明了 。 通过 针对 少量 特定 的 情况 编写 测试 ,可 以 在 不 考虑 所 有 输入 的 情况 下 ,得 到 对 要 
测试 行为 的 相对 合理 的 确定 性 结果 。 

不 过 ,即使 针对 某 个 行为 编写 了 测试 , 代码 中 也 有 可 能 会 出 现 错误 。 在 测试 通过 但 仍然 出 现 
错误 的 情况 下 ,正确 的 反应 不 是 立即 修复 问题 ,而 是 首先 针对 失败 的 行为 编写 一 个 新 测试 。 这样 
一 来 , 不 仅 可 以 验证 在 修复 代码 之 后 是 否 解 决 了 问题 , 而 且 也 添加 了 一 个 可 以 在 将 来 避免 回归 的 
测试 。 

除了 进行 单元 测试 之 外 , QUnit 还 可 以 用 于 功能 测试 。 单元 测试 主要 是 为 了 验证 代码 单元 ( 方 
法 和 函数 ) 的 操作 是 否 正确 , 而 功能 测试 则 是 为 了 确保 用 户 输入 能 够 在 界面 上 得 到 响应 。 比如 说 ， 
第 12 章 实现 了 一 个 表格 排序 功能 。 我 们 可 以 针对 排序 方法 编写 一 个 单元 测试 , 验证 调用 该 方法 后 
表格 确实 进行 了 排序 。 另 外 ,还 可 以 编写 一 个 功能 测试 ,模拟 用 户 单 击 表格 的 表 头 ， 然 后 观察 结 
果 以 确定 表格 确实 被 排序 过 了 。 




































































可 以 将 dominatorjs ( http:/mwbrooks.github.io/dominator.js/ ) 和 FuncUnit 

( http://funcunit.com/ ) 等 功能 测试 框架 与 QUnit 一 起 使 用 , 从 而 简化 编写 功能 测试 

~> 和 模拟 事件 的 工作 。 如 果 想 在 不 同 浏览 器 中 实现 自动 化 测试 ， 可 以 再 选择 
Selenium ( http://seleniumhq.org ) 等 专用 的 功能 测试 框架 。 
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为 了 确保 测试 中 得 到 一 致 的 结果 , 需要 使 用 可 靠 的 且 未 经 修改 的 采样 数据 。 在 测试 应 用 到 动 
态 站 点 的 jQuery 代码 时 ， 如 果 能 捕获 并 存储 相应 页 面 的 一 个 静态 版 本 ， 然 后 基于 该 版 本 来 运行 测 
试 就 比较 好 。 这样 也 可 以 隔离 代码 的 组 件 , 从 而 更 容易 判断 出 错误 是 由 服务 器 端 代 码 还 是 由 客户 
端 代码 导致 的 。 



































延伸 阅读 


这 些 注 意 事项 并 没有 包含 所 有 情况 。 测试 驱动 开发 这 个 主题 本 身 很 庞大 , 短 短 的 一 个 附录 不 
可 能 涵盖 它 的 全 部 内 容 。 以 下 给 出 一 些 有 关 这 方面 的 在 线 资 源 ， 读 者 朋友 可 以 自行 参考 学 习 。 
口 QUnit 的 文档 站 点 (http://qunitjs.com/intro/ ) 
DQ OUnit Cookbook ( http://qunitjs.com/cookbook/ ) 
口 Elijah Manor 的 “jQuery 测试 驱动 开发 ”( jQuery Test-Driven Development，http://msdn.microsoft. 
com/en-us/scriptjunkie/ff452703.aspx ) 
口 Bob McCune 的 “单元 测试 最 佳 实践 ”( Unit Testing Best Practices，http://www.bobmccune. 

com/2006/12/09/unit-testing-best-practices/ ) 

这 方面 的 图 书 也 有 很 多 ， 比 如 Kent Beck 的 Test Driven Development: By Example 和 Christian 

Johansen 的 Test-Driven JavaScript Development。 











B.7 ”小结 


使 用 QUnit 来 编写 测试 对 保证 jQuery 代码 的 清晰 和 可 维护 很 有 用 。 本 附录 介绍 了 几 种 在 项 目 
中 经 常用 到 的 测试 方式 ， 可 以 使 用 这 些 测试 来 确保 代码 实现 了 相应 的 功能 。 通 过 测试 小 型 、 具 体 
的 代码 单元 ,可 以 在 项 目 变 复杂 的 时 候 减 少 很 多 问题 。 与 此 同时 ,还 可 以 更 加 有 效 地 对 整个 项 目 
进行 回归 测试 ， 从 而 节省 大 量 宝贵 的 开发 时 间 。 
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简明 


参考 








本 附录 提供 了 jQuery API 的 简明 参考 , 包括 选择 符 表 达 式 和 方法 。 有 关 jQuery API 参 考 的 更 详 
细 内 容 ， 请 读者 参考 jQuery 文档 站 点 ( http://apijquery.com )。 


C.1 


选择 符 表达 式 


jQuery 的 工厂 函数 $ () 用 于 在 页 面 中 查找 要 操作 的 元 素 。 这 个 函数 接收 一 个 按照 类 似 CSS 语 法 









































构成 的 字符 串 作为 参数 , 这 个 字符 串 参 数 就 叫 选 择 符 表达 式 。 本 书 第 2 章 详细 讨论 了 选择 符 表达 式 。 
C.1.1 简单 的 CSS 选 择 符 
表 C-1 
选 择 符 匹 配 
* 所 有 元 素 
#id 带 有 给 定 ID 的 元 素 
element 给 定 类 型 的 所 有 元 素 
.class 带 有 给 定 类 的 所 有 元 素 
a, b 与 a 或 bp 匹配 的 元 素 
ab 作为 a 后 代 的 bp 匹 配 的 元 素 
a>b 作为 a 子 元 素 的 b 匹 配 的 元 素 
a + b 作为 a 后 面 直接 同辈 元 素 的 b 匹 配 的 元 素 
a ~ Db 作为 a 后 面 同 辈 的 p 匹 配 的 元 素 
C.1.2 ”在 同辈 元 素 间 定位 
表 C-2 
选 择 符 匹 配 
:nth-child (index) 作为 其 父 元 素 第 index 个 子 元 素 的 元 素 ( 从 1 开始 计数 ) 
:nth-child(even) 作为 其 父 元 素 第 偶数 个 子 元 素 的 元 素 (从 1 开始 计数 ) 
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( 续 ) 
选 择 符 匹 配 
:nth-child (0dd) 作为 其 父 元 素 第 奇数 个 子 元 素 的 元 素 ( 从 1 开始 计数 ) 
. 作为 其 父 元 素 第 n 个 子 元 素 的 元 素 ( 从 1 开始 计数 ) 。formula (公式 ) 的 格式 为 
:nth-child (formula) an+b，a、b 为 整数 
:nth-last-child() 与 :nth-child() 相 同 ， 只 不 过 是 从 最 后 一 个 元 素 开始 倒 计 数 
:first-child 作为 其 父 元 素 第 一 个 子 元 素 的 元 素 
:last-child 作为 其 父 元 素 最 后 一 个 子 元 素 的 元 素 
:only-child 作为 其 父 元 素 唯一 一 个 子 元 素 的 元 素 
:nth-of-type() 与 :nth-child() 相 同 ， 只 不 过 只 计 相 同 元 素 
:nth-last-of-type() 与 :nth-of-type() 相 同 ， 只 不 过 是 从 最 后 一 个 元 素 开 始 倒 计数 
:first-of-type 同名 的 同辈 元 素 中 的 第 一 个 元 素 
:last-of-type 同名 的 同辈 元 素 中 的 最 后 一 个 元 素 
:only-of-type 没有 同名 的 同辈 元 素 的 元 素 





C.1.3 在 匹配 的 元 素 间 定位 



































表 C-3 
选 择 符 匹 配 
:first 结果 集中 的 第 一 个 元 素 
:last 结果 集中 的 最 后 一 个 元 素 
:not (a) 结果 集中 与 a 不 匹配 的 所 有 元 素 
:even 结果 集中 的 偶数 元 素 (从 0 开始 计数 ) 
:0dd 结果 和 集中 的 奇数 元 素 ( 从 0 开始 计数 ) 
:eq (index) 结果 集中 索引 为 indaex 的 元 素 〈 从 0 开始 计数 ) 
:gt (index) 结果 集中 所 有 位 于 给 定 索 引 之 后 〈 大 于 该 索引 ) 的 元 素 ( 从 0 开始 计数 ) 
:1t (index) 结果 集中 所 有 位 于 给 定 索 引 之 前 〈 小 于 该 索引 ) 的 元 素 ( 从 0 开始 计数 ) 
C.1.4 属性 
表 C-4 
选 择 符 匹 配 
aete] 带 有 属性 attr 的 元 素 
[attr="value"] attr 属 性 的 值 为 value 的 元 素 
[attr!="value"] attr 属 性 的 值 不 为 value 的 元 素 
[attr^="value"] attr 属 性 的 值 以 value 开 头 的 元 素 
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( 续 ) 
选 择 符 匹 配 
[attr$="value"] attr 属 性 的 值 以 value 结 尾 的 元 素 
[attr*="value"] attz 属 性 的 值 包含 子 字符 串 value 的 元 素 
[attr~="value"] attz 属 性 的 值 是 空格 分 隔 的 多 个 字符 串 ， 其 中 一 个 字符 串 的 值 为 value 的 元 素 
[attr|="value"] attr 属 性 的 值 等 于 value 或 者 以 value 开 头 后 跟 一 个 连 字符 的 元 素 


C.1.5 表单 






































:contains (text) 
:empty 
:has (a) 


:parent 

















不 包含 
后 代 元 
包含 





表 C-5 
选 择 符 匹 配 
input 所 有 <input>、<select>、<textarea> 和 <button> 元 素 
text type="text" 的 <input> 元 素 
:password type="password" 的 <input> 元 素 
:file type="file" 的 <input> 元 素 
:radio type="radio" 的 <input> 元 素 
:checkbox type="checkbox" 的 <input> 元 素 
:submit type="submit" 的 <input> 元 素 
:image type="image" 的 <input> 元 素 
:reset type="reset" 的 <input> 元 素 
:button type="button" 的 <input> 元 素 及 <button> 元 素 
:enabled 启用 的 表单 元 素 
:disabled 禁用 的 表单 元 素 
:checked 选中 的 复 选 框 和 单 选 按钮 元 素 
:selected 选中 的 <option> 元 素 
C.1.6 其 他 自 定义 选择 符 
表 C-6 
选 择 符 匹 配 
:Od 文档 的 根 元 素 
:header 标题 元 素 (如 <h1>、<h2>) 
:animated 其 动画 正在 播放 的 元 素 


包含 给 定 文 本 text 的 元 素 
子 节 点 的 元 素 
素 中 至 少 有 一 个 与 a 匹 配 的 元 素 





节点 


的 元 素 
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( 续 ) 
选 择 符 匹 配 
:hidden 隐藏 的 元 素 ， 包 括 通过 Css 隐藏 的 元 素 及 <input type="hidden" /> 
:visible 与 :hiddaen 匹 配 的 元 素 相反 
: focus 获得 键盘 焦点 的 元 素 




















:lang (language) 





具有 给 定 ( 在 元 素 的 1ang 属 性 或 <meta> 标 签 中 声明 的 ) 语言 代码 的 元 素 


: target URI 标 识 符 指向 的 目标 元 素 


C.2 DOM 遍 历 方法 








在 使 用 $ () 创建 了 jQuery 对 象 之 后 , 通过 调用 下 列 DOM 遍 历 方法 , 可 以 修改 其 中 匹配 的 元 素 ， 
以 便 将 来 操作 。 本 书 第 2 章 讨 论 了 DOM 遍 历 方法 。 


C.2.1 筛选 元 素 


遍历 方法 


表 C-7 
返回 的 jQuery 对 象 中 包含 





.filter (selector) 
.filter(callback) 
.eq (index) 
人 


.last() 


.Slice(start, [end]) 


.not (selector) 


.has (selector) 


C.2.2 ”后代 元 素 


遍历 方法 








与 给 定 的 选择 符 selector 匹 配 的 选中 元 素 
可 调 函 数 callback 返 回 true 的 选中 元 素 
从 0 开始 计数 的 第 indaex 个 选中 元 素 

选中 元 素 中 的 第 一 个 元 素 

选中 元 素 中 的 最 后 一 个 元 素 

从 0 开始 计数 的 给 定 范围 内 的 选中 元 素 
选中 元 素 中 与 给 定 选择 符 不 匹配 的 元 素 
选中 元 素 中 有 后 代 匹 配给 定 选择 符 的 元 素 





























表 C-8 
返回 的 jQuery 对 象 中 包含 








.find(selector) 
.Contents() 


.children([selector]) 


C.2.3 同辈 元 素 


与 给 定 选择 符 selectoz 匹 配 的 后 代 元 素 
子 节 点 〈 包 括 文本 节点 ) 
子 节 点 ， 可 以 传人 可 选 的 选择 符 selector 进 一 步 科 选 

















表 C-9 
遍历 方法 返回 的 jQuery 对 象 中 包含 
-next ([selector]) 每 个 选中 元 素 紧 邻 的 下 一 个 同辈 元 素 ， 可 以 传人 可 选 的 选择 符 
selector 进 一 步 盘 选 














网 


灵 社 区 会 员 吉 舟 (hezelwong@gmail.com) 专 享 尊重 版 权 


附录 C 简明 参考 305 





遍历 方法 


返回 的 jQuery 对 象 中 包含 


( 续 ) 





.nextAll ( [selector]) 


.nextUntil([selector], [filter]) 


.prev([selector]) 


.prevAll([selector]) 





.prevUntil([selector], [filter]) 


.Siblings([selector]) 


C.2.4 祖先 元 素 


遍历 方法 


每 个 选中 元 素 之 后 
进一步 筛选 











素 ， 可 以 传人 可 选 


每 个 选中 元 素 之 后 、 





























的 选择 符 filter 进 一 步 筛选 



































每 个 选中 元 素 之 前 
进一步 筛选 














素 ， 可 以 传人 可 选 


所 有 同辈 元 素 ， 可 以 传人 可 选 的 选择 符 selectoz 进 


表 C-10 


每 个 选中 元 素 之 前 、 



































的 选择 符 filtez 进 一 步 筛 选 








返 








的 jQuery 对 象 中 包含 








的 所 有 同辈 元 素 ， 可 以 传人 可 选 的 选择 符 selector 
直至 但 不 包含 第 一 个 匹配 selector 元 素 的 同辈 元 
每 个 选中 元 素 紧 邻 的 上 一 个 同辈 元 素 ， 可 以 传人 可 选 的 选择 符 
selector 进 一 步 盘 选 


的 所 有 同辈 元 素 ， 可 以 传人 可 选 的 选择 符 selector 


直至 但 不 包含 第 一 个 匹配 selectoz 元 素 的 同辈 元 











步 筛 选 





-Parent ([selector]) 


.Parents ( [Selectoz]) 


.parentsUntil([selector], 


.Closest (selector) 


.offsetParent () 


C.2.5 ”集合 操作 


遍历 方法 


时 





步 般 选 


不 





先 元 素 ， 可 以 传人 








每 个 选中 元 素 的 所 有 祖先 元 素 ， 直 至 但 不 包含 第 一 个 
可 选 的 选择 符 filter 进 一 步 筛选 





























每 个 选中 元 素 的 父 元 素 ， 可 以 传人 可 选 的 选择 符 selector 进 一 步 盘 选 
个 选中 元 素 的 所 有 祖先 元 素 , 可 以 传人 可 选 的 选择 符 selector 进 

















匹配 selectoz 的 祖 


与 选择 符 selector 匹 配 的 第 一 个 元 素 , 遍历 路 径 从 选中 元 素 开 始 , 沿 











DOM 树 向 上 在 其 中 祖先 节点 中 的 查找 











定位 ) 


表 C-11 


返回 的 jQuery 对 象 中 包含 





第 一 个 选中 元 素 被 定位 的 父 元 素 ( 如 ， 通 过 relative 或 absolute 





.add (selector) 
.addBack () 
.end() 

.map (callback) 


.pushStack (elements) 


选中 的 元 素 ， 加 上 与 给 定 选 择 符 匹配 的 元 素 


选中 的 元 素 ， 加 上 





内 部 jQuery 栈 中 之 前 选中 的 元 素 











对 每 个 选中 元 素 调 
指定 的 元 素 
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内 部 jQuery 栈 中 之 前 选中 的 那 一 组 元 素 
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C.2.6 操作 选中 的 元 素 















































表 C-12 

遍历 方法 说 了 明 
"iS (selector) 确定 匹配 的 元 素 中 是 否 有 传人 的 选择 符 匹配 的 元 素 
de 取得 匹配 元 素 相对 于 其 同辈 元 素 的 索引 
:index(element) 取得 匹配 元 素 中 与 指定 元 素 对 应 的 DOM 节 点 的 索引 
$.contains (a,b) 确定 DOM 节 点 b 是 否 包含 DOM 节 点 a 
each(callback) 迭代 匹配 的 元 素 ， 针 对 每 个 元 素 执 行 callback 函 数 
Tengel 取得 匹配 元 素 的 数量 
“get () 取得 与 匹配 元 素 对 应 的 DOM 节 点 的 列表 
-get (index) 取得 匹配 元 素 中 与 指定 索引 对 应 的 DOM 节 点 
.toArray () 取得 与 匹配 元 素 对 应 的 DOM 节 点 的 列表 





C.3 事件 方法 


为 了 对 用 户 的 行为 作出 反应 , 需要 使 用 下 面 给 出 的 事件 方法 来 注册 处 理 程序 。 注意, 许多 DOM 
元 素 仅 适用 于 特定 的 元 素 类 型 ， 本 附录 没有 给 出 相关 的 细节 。 本 书 第 3 章 详细 讨论 了 事件 方法 。 











C.3.1 绑 定 



























































































































































表 C-13 
事件 方法 说 明 

.ready (handler) 绑 定 在 DOM 和 CSS 完 全 加 载 后 调用 的 处 理 程序 handler 

“on(type, [selector], [qatal，handqler) 绑 定 在 给 定 类 型 的 事件 type 发 送 到 元 素 时 调用 的 处 理 程序 handler; 
如 果 提 供 了 selector 则 执行 事件 委托 

.on(levents, [selector] , [datal) 根据 events 对 象 中 的 事件 绑 定 多 个 事件 处 理 程序 

.off (type, [selector], [handler]) 解除 元 素 上 绑 定 的 处 理 程序 

.bind(type, [data], handler) 绑 定 在 给 定 类 型 的 事件 type 发 送 到 元 素 时 调用 的 处 理 程序 handler; 
一 般 都 用 .on () 代替 

.one(type, [data], handler) 绑 定 在 给 定 类 型 的 事件 type 发 送 到 元 素 时 调用 的 处 理 程序 handler， 
并 在 handqlez 被 调用 后 立即 解除 绑 定 

.unbind([type], [handler]) 解除 元 素 上 绑 定 的 处 理 程序 ( 可 以 指定 事件 类 型 或 处 理 程序 ， 不 指定 
则 解除 所 有 绑 定 ) 

ee (selector, type, [datal], 绑 定 当 给 定 事件 发 送 到 与 selector 匹 配 的 后 代 元 素 后 调用 的 处 理 程序 

an 二 

.delegate(selector, handlers) 绑 定 当 给 定 事 件 发 送 到 与 selectoz 匹 配 的 后 代 元 素 后 调用 的 处 理 程序 

.undelegate(selector，type， 解除 之 前 通过 .aelegate() 绑 定 的 到 元 素 上 的 处 理 程序 

[handler]) 
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C.3.2 简写 绑 定 






























































































































































































































































表 C-14 

事件 方法 说 明 
.blur (handler) 绑 定 当 元 素 失去 键盘 焦点 时 调用 的 处 理 程序 
-change (handler) 绑 定 当 元 素 的 值 改 变 时 调用 的 处 理 程序 
click(handler) 绑 定 当 元 素 被 单 击 时 调用 的 处 理 程序 
-dblclick (handler) 绑 定 当 元 素 被 双击 时 调用 的 处 理 程序 
:error (handler) 绑 定 当 元 素 接收 到 错误 事件 ( 取决 于 浏览 器 ) 时 调用 的 处 理 程 序 
:focus (handler) 绑 定 当 元 素 获得 键盘 焦点 时 调用 的 处 理 程序 
:focusin (handler) 绑 定 当 元 素 或 后 代 元 素 获得 键盘 焦点 时 调用 的 处 理 程序 
.focusout (handler) 绑 定 当 元 素 或 后 代 元 素 失去 键盘 焦点 时 调用 的 处 理 程序 
“keydown (handler) 绑 定 当 元 素 拥有 键盘 焦点 且 有 键 被 按 下 时 调用 的 处 理 程序 
.keypress (handler) 绑 定 当 元 素 拥有 键盘 焦点 且 有 按键 事件 发 生 时 调用 的 处 理 程序 
“keyup (handler) 绑 定 当 元 素 拥 有 键盘 焦点 且 有 键 被 释放 时 调用 的 处 理 程序 
“1l0ad (handler) 绑 定 当 元 素 加 载 完成 时 调用 的 处 理 程序 
mousedown (handler) b 定 当 在 元 素 中 按 下 鼠标 键 时 调用 的 处 理 程序 











(RN 


.mouseenter (handler) 








Ph 定 当 和 鼠标 指针 进入 元 素 时 调用 的 处 理 程序 。 不 受 事件 冒 泡影 响 
Ph 定 当 和 鼠标 指针 离开 元 素 时 调用 的 处 理 程序 。 不 受 事件 冒 泡影 响 
定 当 在 元 素 中 移动 鼠标 指针 时 调用 的 处 理 程序 

定 当 和 鼠标 指针 离开 元 素 时 调用 的 处 理 程序 
bh 定 当 和 鼠标 指针 进入 元 素 时 调 
8 完 当 在 元 素 中 释放 鼠标 键 时 调用 的 处 理 程序 
定 当 调整 元 素 大 小 时 调用 的 处 理 程序 
Pp 定 当 元 素 的 滚动 位 置 改变 时 调用 的 处 理 各 
Ph 定 当 元 素 中 的 文本 被 选中 时 调用 的 处 理 程序 
定 当 表单 元 素 被 提交 后 调用 的 处 理 程序 
8 完 当 元 素 从 内 存 中 被 印 载 后 调用 的 处 理 程序 
8 完 在 鼠标 进入 元 素 时 调用 的 enter 和 鼠标 离开 元 素 时 调用 的 1eave 











.mouseleave (handler) 








RS 


.mousemove (handler) 

















.mouseout (handler) 




















.mouseover (handler) 
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.mouseup (handler) 














.resize (handler) 


We 





.Scroll (handler) 


We 





4 

















.Select (handler) 








.Submit (handler) 

















.unload (handler) 


























WW 





.hover (enter, leave) 














C.3.3 触发 事件 








表 C-15 
事件 方法 说 明 
.trigger (type, [datal) 触发 元 素 上 的 事件 并 执行 该 事件 的 默认 操作 
triggerHandler (type, [datal]) 触发 元 素 上 的 事件 ， 但 不 执行 任何 默认 操作 
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C.3.4 简写 触发 方法 






































表 C-16 
事件 方法 说 有明 
.blur() 触发 plur 事 件 
.change () 触发 cnange 事 件 
.click() 触发 cl ick 事 件 
.dblclick() 触发 ablclick 事 件 
.error1() 触发 error 事 件 
-focus () 触发 focus 事 件 
.keydown () 触发 keyaown 事 件 
.keypress () 触发 keypress 事 件 
.keyup () 触发 keyup 事 件 
-select () 触发 select 事 件 
.submit () 触发 submit 事 件 
C.3.5 ”实用 方法 
表 C-17 
事件 方法 说 明 
$.proxy (fn, context) 创建 一 个 新 的 在 指定 上 下 文中 执行 的 函数 





C.4 ”效果 方法 
可 以 使 用 效果 方法 为 DOM 元 素 应 用 动画 。 第 4 章 详细 讨论 了 效果 方法 。 





C.4.1 预定 义 效 果 








表 C-18 
效果 方法 说 明 
.Show () 显示 匹配 的 元 素 
.hide() 隐藏 匹配 的 元 素 
.show(speed, [callback]) 通过 高 度 、 宽 度 及 透明 度 动画 显示 匹配 的 元 素 
.hide(speed, [callback]) 通过 高 度 、 宽 度 及 透明 度 动画 隐藏 匹配 的 元 素 
.toggle([speed], [callback]) 显示 或 隐藏 匹配 的 元 素 
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( 续 ) 
效果 方法 说 明 
.slideDown([speed], [callback]) 以 滑 和 方式 显示 匹配 的 元 素 
.slideUp([speed], [callback]) 以 滑 出 方式 隐藏 匹配 的 元 素 
.slideToggle([speed], [callback]) 以 滑动 方式 显示 或 隐藏 匹配 的 元 素 
.fadeIn([speed], [callback]) 以 淡 入 方式 显示 匹配 的 元 素 
.fadeout ([speed]， [callback]) 以 淡出 方式 隐藏 匹配 的 元 素 
.fadeToggle([speed], [callback]) 以 淡 入 淡出 方式 显示 或 隐藏 匹配 的 元 素 
.fadeTo(speed, opacity, [callback]) 调整 匹配 元 素 的 不 透明 度 
C.4.2” 自 定义 动画 
表 C-19 
效果 方法 说 上 明 

a (AE EE Ess Snes, 针对 指定 的 CSS 属 性 执行 自 定义 动画 

[easing], [callback]) 

animate (attributes, options) .animate() 的 底层 接口 ， 支 持 对 动画 队列 的 控制 


C.4.3 ”队列 操作 


表 C-20 


效果 方法 说 ” 明 





.Gueue ([queueName]) 


取得 第 一 个 匹配 元 素 上 的 动画 队列 








.Gueue ( [queueName] ,callback) 
.Gueue ( [queueName] ,newQueue) 
.dequeue ( [queueName]) 


.ClearQueue ( [GueueName] ) 


.stop([clearQueue], [jumpToEnd]) 
.finish( [queueName]) 
.delay (duration, [queueName]) 


.promisel( [queueName], [target]) 


C.5 ”DOM 操作 方法 


第 5 章 详细 介绍 了 DOM 操 作 方 法 。 





在 动画 队列 的 最 后 添加 
以 新 队列 替换 原 队列 








执行 队列 中 的 下 一 个 动 
清除 所 有 未 执行 的 函数 
停 





回调 函数 





隔 


上 当前 播放 的 动画 ， 然 后 启动 排列 的 动画 ( 如 果 有 ) 








富 止 当前 播放 的 动画 并 将 所 有 排队 的 动画 立即 提前 到 它们 的 目标 值 


停 1 


在 执行 队列 中 的 下 一 项 前 等 待 auration 毫 秒 

















在 











集合 中 所 有 排队 的 操作 完成 后 返回 一 个 待 解决 的 承诺 对 象 
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C.5.1 特性 与 属性 
表 C-21 
DOM 操 作 方法 说 有 明 
.attr (key) 取得 特性 key 的 值 
.attr (key, value) 设置 特性 key 的 值 为 value 
.attr (key, fn) 设置 特性 key 的 值 为 fn ( 基于 每 个 匹配 的 元 素 单独 调用 ) 返回 的 结果 
.attr (obj) 根据 传人 的 键 - 值 对 参数 设置 属性 的 值 
.removeAttr (key) 删除 特性 key 
.prop (key) 取得 属性 key 的 值 
.prop (key,value) 设置 属性 key 的 值 为 value 
.prop (key, fn) 将 设置 属性 key 的 值 为 fn ( 基于 每 个 匹配 的 元 素 单独 调用 ) 返回 的 结果 
.prop (obj) 设置 属性 值 ， 以 键 值 对 形式 传人 
.removeProp (key) | 除 属性 key 
.addClass (class) 为 每 个 匹配 的 元 素 添加 传人 的 类 
.removeClass (class) 从 每 个 匹配 的 元 素 中 删除 传人 的 类 
toggleClass (class) (针对 每 个 匹配 的 元 素 ) 如 果 传 人 的 类 存在 则 删除 该 类 ， 否 则 添加 该 类 
.hasClass (class) 如 果 匹 配 的 元 素 中 至 少 有 一 个 包含 传人 的 类 ， 则 返回 true 
.val () 取得 第 一 个 匹配 元 素 的 value 属 性 的 值 
.val (value) 设置 每 个 匹配 元 素 的 value 属 性 的 值 为 传人 的 value 
C.5.2 ”内容 
表 C-22 
DOM 操 作 方 法 说 有明 
.html () 取得 第 一 个 匹配 元 素 的 HTML 内 容 
.html (value) 将 每 个 匹配 元 素 的 HTML 内 容 设置 为 传人 的 value 
.text () 取得 所 有 匹配 元 素 的 文本 内 容 ， 返 回 一 个 字符 串 
.text (Value) 设置 每 个 匹配 元 素 的 文本 内 容 为 传人 的 value 
C.5.3 CSS 
表 C-23 
DOM 操 作 方 法 说 明 
.Css (key) 取得 css 属 性 key 的 值 


.CSS (key, value) 


.Css (obj) 


网 





设置 css 属 性 key 的 值 为 传人 的 value 
根据 传人 的 键 - 值 对 参数 设置 css 属 性 的 值 
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C.5.4 尺寸 


























表 C-24 
DOM 操 作 方 法 说 明 
.offset() 取得 第 一 个 匹配 元 素 相 对 于 视 口 的 上 、 左 坐标 值 (单位 : 像素 ) 
.position() 取得 第 一 个 匹配 元 素 相对 于 .offsetParent () 返 回 元 素 的 上 、 左 坐标 值 














(单位 : 像素 ) 


.scrollTop() : 配 元 素 的 垂直 深 动 位 置 


































































































.scrollTop (value) i 好 个 匹配 元 素 的 垂直 滚动 位 置 为 传人 的 value 

.scrollLeft () 取得 第 一 个 匹配 元 素 的 水 平 滚动 位 置 

.scrollLeft (value) 设置 每 个 匹配 元 素 的 水 平 滚动 位 置 为 传人 的 value 

.height () 取得 第 一 个 匹配 元 素 的 高 度 

.height(value) 设置 每 个 匹配 元 素 的 高 度 为 传人 的 value 

.width() 取得 第 一 个 匹配 元 素 的 宽度 

.width (value) 设置 每 个 匹配 元 素 的 宽度 为 传人 的 value 

.innerHeight () 取得 第 一 个 匹配 元 素 的 包含 内 边 距 但 不 包含 边框 的 高 度 

.innerWidth() 取得 第 一 个 匹配 元 素 的 包含 内 边 距 但 不 包含 边框 的 宽度 

.outerHeight (includeMargin) 取得 第 一 个 匹配 元 素 的 包含 内 边 距 、 边 框 及 可 选 的 外 边 距 的 高 度 
了 个 














EE 
.outerWidth (includeMargin) 匹配 元 素 的 包含 内 边 距 、 边 框 及 可 选 的 外 边 距 的 宽度 
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C.5.5 插入 




















































































































表 C-25 

DOM 操 作 方 法 说 明 
.append (content) 在 每 个 匹配 元 素 内 部 的 末尾 插入 content 
.appendTo (selector) 将 匹配 的 元 素 插入 到 selector 选 择 符 匹 配 的 元 素 内 部 的 末尾 
.prepend (content) 在 每 个 匹配 元 素 内 部 的 开头 插入 content 
.prependTo (selector) 将 匹配 的 元 素 插入 到 selector 选 择 符 匹 配 的 元 素 内 部 的 开头 
.after (content) 在 每 个 匹配 元 素 的 后 面 插入 content 
.insertAfter (selector) 将 匹配 的 元 素 插 入 到 selector 选 择 符 匹 配 的 元 素 的 后 面 
.before (content) 在 每 个 匹配 元 素 的 前 面 插入 content 
.insertBefore(selector) 将 匹配 的 元 素 插 入 到 selector 选 择 符 匹配 的 元 素 的 前 本 
.wrap (content) 将 匹配 的 每 个 元 素 包 装 在 content 中 
.wrapAll (content) 将 匹配 的 每 个 元 素 作为 一 个 单元 包装 在 content 中 
.wrapInner (content) 将 匹配 的 每 个 元 素 内 部 的 内 容 包 装 在 content 中 
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C.5.6 ”替换 





























表 C-26 
DOM 操 作 方 法 说 明 
.replaceWith (content) 将 匹配 的 元 素 替换 为 content 
replaceAll (selector) 将 selector 选 择 符 匹配 的 元 素 替 换 为 匹配 的 元 素 
C.5.7 删除 
表 C-27 
DOM 操 作 方 法 说 了 明 
.empty () 删除 每 个 匹配 元 素 的 子 节点 
.remove ( [selector]) 从 DOM 中 删除 匹配 的 节点 ， 也 可 以 通过 selector 选 择 符 筛 选 
.detach([selector]) 从 DOM 中 删除 匹配 的 节点 ， 也 可 以 通过 selector 选 择 符 筛选 ， 但 保留 jQuery 给 
它们 添加 的 数据 
.unwrap () 删除 元 素 的 父 元 素 
C.5.8 复制 
表 C-28 
DOM 操 作 方 法 说 明 
.clone( [withHandlers], [deepWithHandlers]) 返回 所 有 匹配 元 素 的 副本 ,也 可 以 复制 事件 处 理 程序 
C.5.9 数据 
表 C-29 
DOM 操 作 方 法 说 明 
.data (key) 取得 与 第 一 个 匹配 元 素 关联 的 key 键 的 数据 项 
.data (key, value) 设置 与 每 个 匹配 元 素 关联 的 key 键 的 数据 项 为 value 
‘removeData (key) 移 除 与 每 个 匹配 元 素 关联 的 key 键 的 数据 项 








C.6 Ajax 方法 


使 用 Ajax 方法 可 以 不 刷新 页 面 就 从 服务 器 取得 信息 。 第 6 章 详细 讨论 了 Ajax 方法 。 
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C.6.1 发 送 请 求 
表 C-30 
Ajax 方法 说 明 
$.ajax([url], options) 使 用 传人 的 options 生 成 一 次 Ajax 请 求 。 这 是 一 个 通常 由 其 他 便 
捷 方 法 调用 的 底层 方法 
.load(url, [data], [callback]) 向 传人 的 ur1 生 成 一 次 Ajax 请 求 ， 然 后 将 响应 放 在 匹配 的 元 素 中 
$.get(url, [data]l, [callback], 使 用 GET 方 法 向 传人 的 uz1 生 成 一 次 Ajax 请 求 
[returnType]) 
$.getJSON (url, [data]l, [callback]) 向 传人 的 ur1 生 成 一 次 Ajax 请 求 , 并 且 将 响应 作为 JSON 数 据 结构 
解析 
$.getscript (url, [callback]) 向 传人 的 url 生 成 一 次 Ajax 请 求 ， 并 且 将 响应 作为 JavaScript 脚 本 
执行 
$.post(url, [data], [callback], 使 用 PosT 方 法 向 传人 的 ur1 生 成 一 次 Ajax 请 求 
[returnType]) 
C.6.2 ”监视 请 求 
表 C-31 
Ajax 方 法 说 明 
.ajaxComplete (handler) 绑 定 当 任意 Ajax 事务 完成 后 调用 的 处 理 程序 
.ajaxError (handler) 绑 定 当 任意 Ajax 事务 发 生 错误 时 调用 的 处 理 程序 
;ed (Hendler) 绑 定 当 任意 Ajax 事务 开始 时 调用 的 处 理 程序 
.ajaxStart (handler) 绑 定 当 任 意 Ajax 事务 开始 但 没有 其 他 Ajax 事务 活动 时 调用 的 处 理 程序 
:ajaxStop (handler) 绑 定 当 任意 Ajax 事务 结束 但 没有 其 他 Ajax 事务 还 在 活动 时 调用 的 处 理 程序 
.ajaxSuccess (handler) 绑 定 当 任 意 Ajax 事 务 成 功 完成 时 调用 的 处 理 程序 
C.6.3 配置 
表 C-32 
Ajax 方法 说 明 





$.ajaxSetup (options) 


$.ajaxPrefilter([dataTypes], 


handler) 


$.ajaxTransport (transportFunction) 


为 后 续 的 Ajax 事务 设置 默认 选项 








为 Ajax 事务 定义 一 个 新 的 传输 机 制 
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在 $.Ajax () 处 理 每 个 请 求 之 前 ， 修 改 每 个 Ajax 请 求 的 选项 
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C.6.4 实用 方法 








表 C-33 
Ajax 方 法 说 有明 
‘serialize() 将 一 组 表单 控件 的 值 编码 为 一 个 查询 字符 串 
.serializeArray () 将 一 组 表单 控件 的 值 编码 为 一 个 JSON 数 据 结构 


$ .param (obj) 

$ .globalEval (code) 
$ .parseJSON (json) 
$ .parseXML (xml) 


$ .parseHTML (htm]l) 


C.7 ”延迟 方法 











在 全 局 上 下 文中 求 




















将 任意 值 的 对 象 编码 为 一 个 查询 字符 串 

直 给 定 的 JavaScript 字 符 串 
将 给 定 的 JSON 字 符 串 转换 为 JavaScript 对 象 
将 给 定 的 XML 字符 串 转 换 为 XML 文档 

将 给 定 的 HTML 字符 串 转换 为 DOM 元 素 





延迟 对 象 及 其 承诺 可 以 让 我 们 使 用 方便 的 语法 在 长 时 间 运 行 的 任务 完成 后 作出 响应 。 相 关内 


容 在 第 11 章 有 详细 的 讨论 。 


创建 对 象 





C.7.1 


表 C-34 


说 明 





$.Deferred([setupFunction]) 


$ .when (deferreds) 


C.7.2 延迟 对 象 的 方法 


方法 


返回 一 个 新 的 延迟 对 象 
在 给 定 的 延迟 对 象 解决 了 之 后 返 





回 一 个 待 解决 的 承诺 对 象 





表 C-35 


说 明 





.resolve([args]) 


.resolveWith(context, [args]) 


.reject ([args]) 


.rejectWith (context, [args]) 


.notify([args]) 
.notifyWith(context, [args]) 


.promise([target]) 


网 








解决 延迟 对 象 并 使 
解决 延迟 对 象 并 使 有 
引用 回调 函数 中 的 context 
扎 绝 延迟 对 象 并 使 
扎 绝 延迟 对 象 并 使 上 
引用 回调 函数 中 的 context 
内 行 progress 回 调 




































































] 给 定 的 参数 调用 完成 回调 
] 给 定 的 参数 调用 完成 回调 


给 定 的 参数 调用 失败 回调 
给 定 的 参数 调用 失败 回调 








国 数 ， 同 时 让 关键 字 this 





























图 数 ， 同 时 让 关键 字 this 








执行 progress 回 调 并 将 关键 字 this 设 定 为 引 














与 当前 延迟 对 象 对 应 的 承诺 对 象 





返 世 
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C.7.3 承诺 对 象 的 方法 
















































































表 C-36 
方法 说 明 
.done (callback) 当 对 象 被 解决 之 后 调用 callback 
‘fail(callback) 当 对 象 被 拒绝 之 后 调用 callback 
"always( [callback]) 当 对 象 被 解决 或 被 拒绝 之 后 调用 callback 
.then (doneCallbacks, failCallbacks) 当 对 象 被 解决 之 后 调用 donecallbacks， 或 在 对 象 被 拒绝 之 后 调 
dfailcallbacks 
‘progress (callback) 当 对 象 每 次 接收 到 进度 通知 时 就 执行 callback 
.isRejected() 如 果 对 象 被 拒绝 了 ， 返 回 true 
-isResolved() 如 果 对 象 被 解决 了 ， 返 回 true 
-State() 根据 当前 状态 运行 'pending' 、'resolved' 或 'rejected' 
‘pipe([doneFilter], [failFilter]) 返回 一 个 新 的 承诺 对 象 ， 该 对 象 在 原始 承诺 对 象 被 解决 时 也 会 被 
































解决 ， 可 选 地 通过 一 个 函数 来 进行 筛选 








C.8 其 他 方法 




















以 下 实用 方法 不 能 归 入 前面 的 几 类 中 ,但 在 使 用 jQuery 编写 脚本 时 仍然 是 非常 有 用 的 。 














C.8.1 jQuery 对 象 的 属性 














































































































表 C-37 
属 性 说 明 
$.support 返回 一 个 属性 对 象 ， 表 示 浏 览 器 是 否 支 持 各 种 特性 和 标准 
C.8.2 数组 和 对 象 
表 C-38 
函 数 说 明 
$.each(collection, callback) 迭代 遍历 集合 ， 针 对 集合 中 的 每 一 项 执行 回调 函数 
$.extend(target, addition, ...) 扩展 target 对 象 ， 即 将 后 面 传人 对 象 的 属性 添加 到 这 个 对 象 中 
$.grep (array，callback，[invert]) ， 通过 使 用 回调 函数 测试 来 筛选 数组 
$ .makeArray (object) 将 对 象 转换 为 一 个 数组 
$.map (array, callback) 针对 数组 中 每 一 项 执行 回调 函数 ,将 返回 的 结果 组 织 成 一 个 新 数组 返回 
$.inArray (value, array) 确定 数组 array 中 是 否 包 含 值 value; 如 果 value 没 有 包含 在 array 中 ， 
则 返回 -1 
$.merge(larrayl, array2) 合并 数组 arrav1 和 array2 
$.unique (array) 从 数组 中 移 除 重复 的 DOM 元 素 
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C.8.3 ”对象 内 省 





C.8.4 












































表 C-39 

函 数 说 明 
$.isArray (object) 确定 object 是 不 是 一 个 数组 
$.isEmptyObject (object) 确定 object 是 不 是 空 的 
$.isFunction (object) 确定 object 是 不 是 一 个 函数 
s$.isPlainobject(object) 确定 object 是 不 是 通过 对 象 字面 量 或 new _ object 创建 的 
$.isNumeric (object) 确定 object 是 不 是 数值 
$.isWindow (object) 确定 object 是 不 是 浏览 器 窗口 
$ .isXMLDoc (object) 确定 object 是 不 是 XML 节 点 
$ .type (object) 


其 他 


取得 object 的 JavaScript 类 





.holdReady (hold) 















































表 C-40 
函 数 说 明 
$.trim(string) 从 字符 串 末 尾 移 除 空白 符 
$.noConflict ( [removeALL]) 向 其 他 库 让 渡 $ 标 识 符 使 用 权 ， 恢 复 使 用 jQuery 标识 符 
$ .noop() 一 个 什么 也 不 做 的 函数 
$ .now() 返回 当前 时 间 ， 以 自 纪 元 时 间 惟 开始 到 现在 的 秒 数 表 示 
$ 


防止 触发 ready 事 件 或 者 释放 当前 的 保留 
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欢迎 加 入 


入 
灵 仁 区 
最 前 沿 的 IT 类 电子 书 发 售 平台 


电 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 狂 图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
豫 衍 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
体验 : 在 线 阅读 和 PDF。 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
布 易 ， 而 且 尽 可 能 采用 了 彩色 图 片 ( 即 使 he a 
有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进 pon 
行 搜索 、 剪 贴 、 复 制 和 打印 。 
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最 方便 的 开放 出 版 平台 最 直接 的 读者 交流 平台 


图 灵 社 区 向 读者 开放 在 线 写作 功能 ， 协 助 你 实现 自 出 在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 
版 和 开源 出 版 的 梦想 。 利 用 “合集 ” 功能 ， 你 就 能 联 误 、 发 表 评 论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
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合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 银子 。 

评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 

的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 你 可 以 积极 参与 社区 经 常 开展 的 访谈 、 审 读 、 评 先 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 等 多 种 活动 ， 硫 取 积分 和 银子 ， 积 累 个 人 声望 。 
图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 




















社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 

者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 妆 力 的 。 
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